[TIL] ProtoType

go286·2021년 3월 25일
0
post-thumbnail

1. 프로토타입

프로토타입 기반 언어는 객체원형인 프로토타입을 이용하여 새로운 객체를 만들어낸다.
이렇게 생성된 객체 역시 또 다른 객체의 원형이 될 수 있고 프로토타입은 객체를 확장하고 객체 지향적인 프로그래밍을 할 수 있게 해준다.

프로토타입 2가지

  • 프로토타입 객체를 참조하는 prototype 속성
  • 객체 멤버인 proto 속성이 참조하는 숨은 링크

자바스크립트 객체에는 [[Prototype]] 이라는 내부 프로퍼티가 있고, 다른 객체를 참조하는 레퍼런스로 사용한다.
객체에서 프로퍼티를 탐색할 때 객체 내에 프로퍼티가 존재하지 않으면 undefined를 출력하고 끝나는게 아니라 [[Prototype]] 참조를 따라가면서 프로퍼티가 존재하는지 탐색한다.

var user = { name : 'Bj'};

console.log(user.name); // "Bj"
consol.log(user.hasOwnProperty('name')); // true
consol.log(user.hasOwnProperty('age')); // false

user의 프로토타입 링크는 어떤 다른 객체를 참조하고 있고 그 객체에 hasOwnProperty가 정의되어있어 참조가 가능하다.

2. 프로토타입 객체(.prototype)와 프로토타입 링크(.proto)

var obj = { a: 1, b: 2};

var obj = new Object({a :1, b: 2});

자바스크립트의 객체에는 proto라는 프로퍼티가 존재하고 함수에는 prototype이라는 프로퍼티가 존재하는데, 객체의 proto을 프로토타입 링크, prototype을 프로토타입 객체라고 할 수 있고, 객체 생성 시 생성된 객체의 프로토타입 링크가 생성 함수의 프로토타입 객체를 참조하는 형태를 가지게 된다.

즉 obj 객체가 생성되면 프로토타입 링크가 객체의 생성 함수의 prototype이 가르키는 객체를 참조하게 된다.

var obj1 = { a: 1, b: 2 }; // new Object({ a: 1, b: 2})와 같음
var obj2 = new Object({ c: 3, d: 4 });

console.log(obj1.__proto__ === Object.prototype); // true
console.log(obj2.__proto__ === Object.prototype); // true
console.log(obj1.__proto__ === obj2.__proto__); // true

console.log(obj1.__proto__.valueOf === Object.prototype.valueOf); // true
console.log(obj2.__proto__.valueOf === Object.prototype.valueOf); // true
console.log(obj1.valueOf === Object.prototype.valueOf); // true
console.log(obj2.valueOf === Object.prototype.valueOf); // true

obj1과 obj2가 프로토타입 링크에 의해 동일한 프로토타입 객체를 참조하고 있음을 나타낸다.

3. 프로토타입 연쇄

const car = {
  wheels: 4,
  drive() {
    console.log("drive");
  },
};

const bmw = {
  color: "red",
  navigation: 1,
};

const benz = {
  color: "black",
};

const audi = {
  color: "blue",
};

bmw.__proto__ = car; //car 가 bmw의 프로토타입
benz.__proto__ = car;
audi.__proto__ = car;

bmw.wheels // 4

객체에서 프로퍼티를 호출하면 프로토타입 연쇄과정이 일어난다.
1. 객체 내에 해당 프로퍼티를 찾는다.
2. 객체 내에 프로퍼티가 존재하지 않으면 객체가 참조(proto)하고 있는 prototype 객체에서 프로퍼티를 찾는다.
3. 최상위 prototype까지 탐색하며 2번 항목을 반복한다.
4. 존재하지 않으면 undefined를 반환한다.

이렇게 상위 prototype 참조를 타고 올라가는 과정을 프로토타입 연쇄라고 하며, 자바스크립트 명세에서는 [[prototype]]이라고 표현한다.

4. 결론

프로토타입 기반 언어는 객체원형인 프로토타입을 이용하여 새로운 객체를 만들어낸다. 이렇게 생성된 객체 역시 또 다른 객체의 원형이 될 수 있고 객체를 확장하고 객체 지향적인 프로그래밍을 가능하게 해준다.

0개의 댓글