소년코딩

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

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

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 소년코딩

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

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