티스토리 뷰
자바스크립트는 프로토타입 기반의 객체지향 프로그래밍을 지원한다. 자바스크립트의 모든 객체는 [[Prototype]]이라는 숨겨진 프로퍼티가 존재하는데, 이 프로퍼티가 객체의 부모 프로토타입 객체를 가리킨다.
앞선 글에서 생성자 함수를 호출하면, 생성자 함수의 prototype 프로퍼티가 새로 생성된 객체의 [[Prototype]] 프로퍼티에 설정된다고 설명했다.
그림 1과 같이 프로토타입 객체가 설정된 객체는 프로토타입 객체의 메서드를 이용할 수 있다. 아래 코드를 보자.
// 생성자 함수
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
// Person 프로토타입에 showInfo 메소드 추가
Person.prototype.showInfo = function() {
console.log(`name: ${this.name}, age: ${this.age}, gender: ${this.gender}`);
}
let person = new Person('kook', '28', 'male');
person.showInfo(); // name: kook, age: 28, gender: male
person 객체가 Person.prototype의 메서드를 마치 자기 자신의 메서드처럼 이용하는 것을 볼 수 있다. person 객체의 구조를 출력해보면 아래 그림 2와 같다. person 객체의 프로토타입이 Person.prototype 객체로 설정돼있고, Person.prototype의 메서드를 이용할 수 있다는 것을 알 수 있다.
프로토타입 체이닝
위에서 자바스크립트의 객체는 프로토타입 객체의 메서드를 사용할 수 있다는 것을 알아봤다. 자바스크립트에서 특정 객체의 프로퍼티를 읽거나 메서드를 호출할 때, 접근하려는 프로퍼티나 메서드가 없다면 [[Prototype]] 링크를 따라 프로퍼티나 메서드를 차례대로 탐색한다. 이것을 프로토타입 체이닝이라고 한다.
위에서 작성했던 person 객체의 구조가 아래 그림 3에 나와있다.
그림 3과 같이 person 객체의 프로토타입이 구성돼있는데, person 객체가 showInfo라는 메서드를 호출하면 person 객체 자체에 없으니 프로토타입 체이닝을 통해 Person.prototype 객체에서 메서드를 찾아서 호출한다.
만약 아래 코드와 같이 toString 함수를 호출한다면 어떻게 될까?
let person = new Person('kook', '28', 'male');
person.toString(); // [object Object]
마찬가지로 person 객체에서 toString 메서드를 찾고, 못찾으면 Person.prototype 객체에서, 또 못찾으면 Object.prototype 객체에서 메서드를 찾을 것이다. Object.prototype 객체에는 toString 메서드가 존재하므로 호출될 것이고, 이 과정은 아래 그림 5와 같다.
Override
프로토타입 체이닝은 객체의 프로퍼티를 읽거나 메서드를 호출할 때, 찾을 때까지 프로토타입 링크를 탐색하는 것이라고 말했다. 이것을 이용해서 부모 객체의 메서드를 Override 할 수 있다. 방법은 하위 객체에서 상위 객체의 메서드를 재정의하면 된다.
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
Person.prototype.showInfo = function() {
console.log(`name: ${this.name}, age: ${this.age}, gender: ${this.gender}`);
}
let person = new Person('kook', '28', 'male');
// person 객체의 showInfo 메서드 재정의
person.showInfo = function() {
console.log('new showInfo()');
}
person.showInfo(); // new showInfo()
위 코드를 보면 Person.prototype 대신 person 객체의 showInfo가 호출된 것을 알 수 있다.
'프로그래밍 > Javascript' 카테고리의 다른 글
자바스크립트 클로저 (2) | 2019.11.12 |
---|---|
자바스크립트의 실행 컨텍스트 (1) | 2019.11.08 |
자바스크립트 this (0) | 2019.11.07 |
자바스크립트 함수 (0) | 2019.11.06 |
자바스크립트 데이터 타입 (0) | 2019.11.06 |
- Total
- Today
- Yesterday
- Linux
- 클로저
- @Component
- @Qualifier
- nodejs
- @Autowired
- unity
- @Bean
- mybatis
- JavaScript
- Bin
- MySQL
- Closure
- npm
- thymeleaf 변수 인식
- Barycentric coordinates
- chunk
- spring batch
- spring
- Check point within polygon
- Tasklet
- thymeleaf cannot resolve
- Express
- Bean
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |