티스토리 뷰

자바스크립트는 프로토타입 기반의 객체지향 프로그래밍을 지원한다. 자바스크립트의 모든 객체는 [[Prototype]]이라는 숨겨진 프로퍼티가 존재하는데, 이 프로퍼티가 객체의 부모 프로토타입 객체를 가리킨다.

앞선 글에서 생성자 함수를 호출하면, 생성자 함수의 prototype 프로퍼티가 새로 생성된 객체의 [[Prototype]] 프로퍼티에 설정된다고 설명했다.

[그림 1] 생성자 함수와 프로토타입

그림 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의 메서드를 이용할 수 있다는 것을 알 수 있다.

[그림 2] person 객체의 프로토타입

프로토타입 체이닝

위에서 자바스크립트의 객체는 프로토타입 객체의 메서드를 사용할 수 있다는 것을 알아봤다. 자바스크립트에서 특정 객체의 프로퍼티를 읽거나 메서드를 호출할 때, 접근하려는 프로퍼티나 메서드가 없다면 [[Prototype]] 링크를 따라 프로퍼티나 메서드를 차례대로 탐색한다. 이것을 프로토타입 체이닝이라고 한다.

위에서 작성했던 person 객체의 구조가 아래 그림 3에 나와있다.

[그림 3] 프로토타입 체인

그림 3과 같이 person 객체의 프로토타입이 구성돼있는데, person 객체가 showInfo라는 메서드를 호출하면 person 객체 자체에 없으니 프로토타입 체이닝을 통해 Person.prototype 객체에서 메서드를 찾아서 호출한다.

[그림 4] person 객체의 showInfo() 메서드 호출

만약 아래 코드와 같이 toString 함수를 호출한다면 어떻게 될까?

let person = new Person('kook', '28', 'male');
person.toString(); // [object Object]

마찬가지로 person 객체에서 toString 메서드를 찾고, 못찾으면 Person.prototype 객체에서, 또 못찾으면 Object.prototype 객체에서 메서드를 찾을 것이다. Object.prototype 객체에는 toString 메서드가 존재하므로 호출될 것이고, 이 과정은 아래 그림 5와 같다.

[그림 5] person 객체의 toString() 메서드 호출

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' 카테고리의 다른 글

자바스크립트 클로저  (0) 2019.11.12
자바스크립트의 실행 컨텍스트  (0) 2019.11.08
프로토타입 체이닝  (0) 2019.11.07
자바스크립트 this  (0) 2019.11.07
자바스크립트 함수  (0) 2019.11.06
자바스크립트 데이터 타입  (0) 2019.11.06
댓글
댓글쓰기 폼