항상 필요한 속성과 함수는 틀처럼 미리 만들어 두고, 필요할 때마다 그 틀을 복제한 인스턴스를 만들어
해당 정보값을 담기 위해 사용한다.
※ 생성자 함수 안에 객체의 속성과 함수를 정의할 때는 this 예약어 다음에 마침표와 속성 이름을 입력한다.
function People(name,id,age,address){
this.name = name;
this.id = id;
this.age = age;
this.address = address;
}
const member = new People('만수르','money',33,'이태원');
document.write(`<b>${member.name}</b>`);
document.write(`<ul><li>id : ${member.id}</li>`);
document.write(`<li>나이 : ${member.age}</li>`);
document.write(`<li>주소 : ${member.address}</li></ul>`);
원의 둘레와 넓이를 계산하는 함수를 Circle 객체안에 선언해보자.
<html>
<body>
<form action="">
<input type="number" id="input" placeholder="입력"></input>
<button onclick="inputNum()">클릭</button>
</form>
<script src="./js/quiz-2.js"></script>
</body>
<Js>
function Circle(radius) {
this.radius = radius;
this.circumference = () => Math.floor(this.radius * 2 * Math.PI);
this.area = () => Math.floor(Math.pow(this.radius, 2) * Math.PI);
}
const inputNum = () => {
const r = document.querySelector("#input").value;
console.log(r);
const circle1 = new Circle(r);
console.log(circle1);
document.write("반지름이 " + r + "cm일 때" +
"<br>원의 둘레 : 약 " + circle1.circumference() +
"cm <br>원의 넓이 : 약 " + circle1.area() + "cm<sup>2</sup>");
}
<실행화면>
※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.
'Javascript > Javascript 기본' 카테고리의 다른 글
| 여행 준비물 점검 목록 만들기 (0) | 2020.07.26 |
|---|---|
| Array 객체 (0) | 2020.07.26 |
| 이미지 슬라이드 쇼 (0) | 2020.07.24 |
| 기념일 계산기 (0) | 2020.07.24 |
| 객체 (0) | 2020.07.23 |
댓글