본문 바로가기
2020-2021/TIL

Inheritance - (Prototype chain)

by Tate_Modern 2020. 10. 28.

1. Prototype Chaining

let human = function (name) {
  this.name = name;

  human.prototype.sleep = function () {
    console.log("zzz");
  };
};
let steve = new human("steve");

------------------------------------------------------------------------
여기서 왜 toString이라는 메소드를 구현하지 않았는데도 실행되는 이유는?
 
answer => 모든 object 는 Object를 상속받는다!!!!!! 
object가 Object의 자식객체이므로 정의하지 않아도 자식객체는 부모객체의 메소드를 사용가능!  
------------------------------------------------------------------------

steve.toString(); // [object Object]
steve.__proto__ === human.prototype; //true
steve.__prooto__;

//내부에는 위에서 정의한 메소드 sleep이 있고 __proto__:Object가 있음

prototype은 function 함수가 정의되는 것과 동시에 생겨난다
prototype은 객체로 그 안의 고유의 갖고 있는 메소드들이 있다.

 

2. Assingnable prototype 

 

 object를 array처럼 사용하기

let myArr = function () {};
myArr.prototype = Array.prototype;

let myNewArr = new myArr();
// It works like Array

 

 

3. The way to get an Inheritance 

// 상속연결법!

let Human1 = function (name) {
  this.name = name;
};
Human1.prototype.sleep = function () {
  console.log("zzz");
};
let Tate = new Human1("Tate");

let student = function (name) {
  this.name = name;
};
---------------------------------------------------------------------------------------------
  /*여기서 휴먼의 기능을 어떻게 가져올 수 있을까?
          
          1. 인스턴스의 proto에 직접 부모노드의 프로토타입을 넣는 방법.
         
           Scalet.__proto__ = Human.prototype (확인하는 용도로만 사용!) X
          
          2. 자식노드의 프로토타입을 부모노드의 프로토타입에 덮어 씌우는 방법.
          
          Student.prototype = Human.prototype (다음과 같은 방식으로 하게 되면 student의 기능상실)
          
          3. 자식노드의 프로토타입에 부모의 프로토타입을 shallow copy하는 방법.
          
          student.prototype = Object.create(Human.prototype);
                prototype이라는 객체안에 Human.prototype를 넣는다!!!!
            이렇게 하면 넣어지기는 하지만 sleep의 메소드를 사용했을 때 undefined가 나온다.
        
            이유는 ?
            정확한 상속 구현이 안되어 있기 때문이다. (자바스크립트가 oop구현을 위해 만들어지지 않았음.)
            sleep 메소드 자체가 Human에서 복사 붙여넣기를 한 것 이기 때문에 아직까지 
            그 기능은 Human에게만 작용이 된다. (student의 메소드가 아니다.)
            그래서 student.prototype.constructor = student 를 식에 넣어준다.
            이렇게 되면  Human.prototype.sleep 의 Human이 student로 바뀐다.

            이렇게 했을 때 문제점이 발생한다.  
         	(this.Human1 = undefined가 된다.)
            
            Human.call(this, name) [or Human.apply(this, arguments)] 까지 작성해줘야
            student가 Human의 메소드를 상속받을 수 있다.

            *추가 만약 human에서 카피한 메소드를 student 안에서 실행시켰을 때 human의 메소드와 
            student자체에서 커스텀한 메소드 둘 다 실행시키고 싶을 때에는 ?
            
            student.prototype.sleep = function() {
                Human1.prototype.sleep.apply(this);  b. 이 부분의 sleep.apply(this)에 의해 묶이면서  
                console.log('자면안돼!!!')  c. a안에 c 부분까지 들어가게 됨
            }
            -> a. 이렇게 추가하게 되면 Human1의 sleep 메소드가
            Human1.prototype.sleep = function () {console.log("zzz")}; 이 부분을
            
      */
      ---------------------------------------------------------------------------------------------

// 원하는 객체의 메소드 상속받는 방식
student.prototype = Object.create(Human1.prototype);
student.prototype.constructor = student;
Human1.call(this, name);
student.prototype.sleep = function () {
  Human1.prototype.sleep.apply(this);
  console.log("자면안돼!!!");
};

student.prototype.learn = function () {
  console.log(`${this.name} is in codeStates`);
};
let Scalet = new student("Scalet");
Scalet.learn();
Scalet.sleep();

'2020-2021 > TIL' 카테고리의 다른 글

주소공유/Object.create()/Object.assign()  (0) 2020.11.05
time complexity  (0) 2020.10.28
Instantiation Patterns  (0) 2020.10.28
Obj Oriented Programming?!  (0) 2020.10.28
Trees  (0) 2020.10.27

댓글