immersive TIL #8

paxkk·2020년 7월 30일

__ proto __, constructor, prototype의 관계 (상속)

<생활코딩 참고>

자바스크립트에서 객체는 모두 부모를 가지고 있고 부모와 연결되어있는데
객체는 부모에게 있는 프로퍼티나 메소드를 사용할 수 있다.(상속개념)
부모 객체를 prototype객체, prototype이라고 한다.

__ proto __
함수도 객체이기 때문에 함수를 포함해서 모든객체가 가지고 있는 프로퍼티다.
부모의 프로퍼티에대한 정보를 의미한다.
즉 ,__ proto __ 프로퍼티는 그 객체에게 상속을 해 준 부모 객체를 가리킨다

var obj1 = { 
food : “banana”, 
eat : function() { 
console.log(“Mmmmmm “ + this.food) 
} 
}

var obj2 = {}
obj2.__proto__ = obj1

위 코드에서 obj1은 food라는 프로퍼티와 eat이라는 메서드를 가지고 있다.
obj2는 빈객체이고 obj1에서 상속받는다.
상속을 해준객체(obj1)이 상속을 받은객체(obj2) 객체의 prototype이 되는 것이다.

constructor
prototype 객체(__ proto __프로퍼티 , prototype 객체)는 constructor 프로퍼티를 갖고있다.
prototype 객체의 constructor 프로퍼티를 통해 어떤 함수가 호출했는지 알 수 있다.

object.create

Object.create() 인자로 주어진 객체를 prototype으로 하는 새로운 객체를 생성하는것이다.

var obj1 = { 
food : “banana”, 
eat : function() { 
console.log(“Mmmmmm “ + this.food) 
} 
}

var obj2 = Object.create(obj1) // obj2는 obj1을 상속받는다.

obj 2  // {};  Object.create 매서드도 상속이기때문에 obj2는 빈객체다.

ES6에서의 class와 super의 이용하는 방법

es6의 class는 prototype의 psedocode를 좀 더 쉽게 표현하는 방법이다.

class는 함수이기 때문에 함수에서 표현식과 선언식을 사용할 수 있는것처럼
class 표현식과 class 선언식이 존재한다.
다만, 함수에서는 호이스팅이 일어나지만 class에서는 호이스팅이 일어나지 않는다.

class person {
  constructor(name, age) {               //  class로 생성된 객체를 생성하고 초기화한다.
    this.name = name;
    this.age = age;
  } 
   say() {
    console.log(this.name + 'hello');
  }
 }
 class person2 extends person {          //extends를 이용해 클래스를 상속 시킬 수 있다.
  say() {
  super.say();                           //super는 객체의 부모가 가지고 있는 함수들을 호출한다.
    console.log(this.name + ' hi');
  }
}