소년코딩의 자바스크립트 강좌 22. 프로토타입 체이닝

자바스크립트에서 객체는 자기 자신의 프로퍼티뿐만 아니라, 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티 또한 마치 자신의 것처럼 접근하는게 가능하다.

이것을 프로토타입 체이닝이라고 부른다.

---

1. 리터럴 방식으로 생성된 객체의 프로토타입 체이닝

var blog = {
     name : 'Oppa',
     sayName : function() {
          console.log('My blog is ' + this.name);
     }
};
 
blog.sayName();                                                     // 'My blog is Oppa'
 
// hasOwnProperty() 메서드 : 인자로 넘긴 문자열 이름의 프로퍼티나 메서드가 있는지 체크하는 자바스크립트 표준 API 함수
console.log(blog.hasOwnProperty('name');           // true
console.log(blog.hasOwnProperty('nickName');     // false

blog 객체에서 hasOwnProperty() 메서드가 없음에도 결과가 정상적으로 출력되었다.

그 이유는 프로토타입 체이닝에 의해 Object.prototype 객체에서 호출되었기 때문이다.

(객체 리터럴로 생성한 객체는 Object()라는 내장 생성자 함수로 생성된 것이다.)

---

2. 생성자 함수로 생성된 객체의 프로토타입 체이닝

자바스크립트에서 모든 객체는 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 객체를 자신의 프로토타입 객체(부모 객체)로 취급한다.

// Blog() 생성자 함수
function Blog(name) {
     this.name = name;
}
 
// a 객체 생성
var a = new Blog('Oppa');
 
// 프로토타입 체이닝
console.dir(a.hasOwnProperty('name'));  // true

---

3. 프로토타입 체이닝의 종점

자바스크립트에서 Object.prototype 객체는 프로토토타입 체이닝의 종점이다.

즉, 모든 자바스크립트 객체는 Object.prototype의 프로퍼티와 메서드를 사용 가능하다.

---

4. 프로토타입 동적 추가/ 삭제

프로토타입도 객체이므로 일반 객체처럼 동적으로 프로퍼티를 추가/ 삭제 가능하다.

// Blog() 생성자 함수
function Blog(name) {
     this.name = name;
}
 
// a 객체 생성
var a = new Blog('oppa');
 
// a.sayName();                  // error
 
// 프로토타입 객체에 sayName() 메서드 정의
Blog.prototype.sayName = function() {
     console.log('my blog name is ' + this.name);
}
 
a.sayName();                     // 'my blog name is Oppa'

---

5. 프로토타입 체이닝 실행

프로토타입 체이닝은 객체의 프로퍼티를 읽거나, 메서드를 호출할 때만 실행된다.

// Blog() 생성자 함수
function Blog(name) {
     this.name = name;
}
 
Blog.prototype.age = 25;
 
var a = new Blog('oppa');
 
console.log(a.age);   // 25
 
// 쓰기에는 프로토타입 체이닝이 일어나지 않는다.
a.age = '17';
 
console.log(a.age);   // 17

---

 

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.