프로토타입 상속

프로토타입 상속

자바스크립트는 객체지향 언어인가?

• 그렇습니다. 다만 다른 언어와는 달리 프로토타입 상속에 기반을 둔 OOP언어입니다. => Class 문법지원 => 다른언어와 비슷.

상속의 필요성

• 가장 큰 목적은 재사용입니다.
• 이미 부모쪽에서 정의된 속성과 메서드를 그대로 물려받아 재사용할 수 있습니다.
• 새로운 기능을 추가해서 기존 기능에서 더 확장시킬 수도 있습니다.
• 중복해서 또 작성하지 않아서 좋고, 필요에 따라서는 더 확장도 가능합니다.

프로타입 체인

• __proto__는 상속을 해준 부모(원형)를 가리킵니다.(참조).
• 자식 객체가 __proto__가 가리키는 부모 객체의 멤버(속성, 메서드)를 사용할 수 있습니다.

let obj = {
    name: '홍길동',
    age: 20,
    sayHi: function() {
        console.log("Hi~" + this.name);
    }
};
let obj2 = {
	name: "이순신"
};
// 여기서 obj2 객체의 __proto__속성이 가리키는것은 0bject(최상위)이다.
// 여기서 __proto__속성이 가리키는 것을 바꿀수있는가? yes
obj2.__proto__= obj1; //이렇게 하면 obj2의 부모(원형)이 obj1이 된다.
// 즉, obj2는 obj1이 가지는 멤버를 사용할 수 있게 됨.
console.log(ob2.name); // 이순신 => 출력되는 이유는 obj2 객체내에 name 속성이 있으니까 부모까지 찾으러 안가고 출력.
console.log(obj2.age); // 20 => 출력되는 이유는 obj2 객체내에 age 속성이 없으니까 부모까지 찾아 올라감.
obj2.sayHi(); // Hi~ 이순신

빈 객체 생성후

• __proto__ 속성에 원하는 객체(부모가 될 또는 원형이 될)를 할당(상속).

  let obj = {
      name: '홍길동',
      age: 20,
      sayHi: function() {
          console.log("Hi~" + this.name);
      }
  };
  let obj2 = {
  	name: "이순신"
  };
  let obj3 = {};
  obj2.__proto__ = obj1
  obj3.__proto__ = obj2; // 이렇게 바꾸면 obj2의 부모(원형)인 obj1의 멤버까지 모두 상속을 받아 이용.
  console.log(obj3.hasOwnProperty("asdasd")); // false
  console.log(obj3.name); // 이순신
  console.log(obj3.age);	// 20
  obj3.sayHi(); // Hi~ 이순신
  

정리

• 위 예제를 통해서 알 수 있듯이 자바스크립트는 자신에게 없는 특성(속성, 메서드)을 __proto__가 가라키는 부모(원형)에서 가져옵니다.
• 맨 하위 자식 객체에서 부터 순착적으로 연결되어있는 원형을 찾아갑니다. ==> “프로토타입 체인”
• 즉, __proto__ 속성이 가리키는 부모(원형)이 바로 상속을 해준 부모(원형)가 바로 상속을 해준 부모입니다. <== 이 객체를 해당 객체의 프로토타입 부모(원형)라고 합니다.
• 이와 같이, JS는 프로토타입 체인을 사용하여 객체의 특성(속성, 메서드)를 다른 객체로 전파합니다. ==> “프로토타입 상속”
• “프로토타입 상속”으로 구현하는 객체지향 언어를 **“프로토타입 기반의 객체지향 언어” ** 라고 합니다.