생성자 함수 (constructor)
인스턴스 (객채) (instance)
프로토타입 (prototype) : 생성자 전용의 공통저장창고 - 자주 쓰는 함수(메서드)를 넣는다.
생성자를 통해서 인스턴스를 만들고,
인스턴스가 프로토타입의 함수를 공유해서 참조하는 코드를 짜는 일련의 행위
: 객체지향형 프로그래밍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>객체지향 프로그래밍</title>
<link rel="stylesheet" href="../css/js_index.css">
<script defer src="../js/navigator.js"></script>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>@charset 'UTF-8';
div {
width : 200px;
height : 200px;
background-color: gray;
margin : 50px;
}class Box {
constructor(selector) {
this.el = document.querySelector(selector);
console.log(this);
console.log(this.el);
this.el.addEventListener('click',()=>{
this.changeBg(this.el);
})
}
changeBg(selector) {
selector.style.backgroundColor = 'hotpink';
}
}
new Box('.box1');
'javascript' 카테고리의 다른 글
| 논리연산자(||) 활용하기 : 매개변수 디폴트 할당 (0) | 2022.10.04 |
|---|---|
| selector expression (0) | 2022.07.22 |
| 화살표 함수 (0) | 2022.06.23 |
| 호이스팅 (0) | 2022.06.22 |
| location (0) | 2022.06.22 |
