[TIL] Prototype Chain

김민성·2021년 2월 26일
0

Prototype Chain

모든 function에는 프로토타입 속성이있습니다.

프로토타입은 모델의 청사진을 만들 때 쓰는 원형 객체입니다.

constructor는 인스턴스가 초기화될 때 실행하는 생성자 함수입니다.

this 는 함수가 실행될 때, 해당 scope마다 생성되는 고유한 실행 context입니다. new 키워드로 인스턴스를 생성했을 때에는, 해당 인스턴스가 바로 this의 값이 됩니다.


function Human(name){
	this.name = name;
}

Human.prototype.sleep = function(){console.log('zzz')};

let steve = new Human('steve')

여기서 steve.__proto__ 와 Human.prototype이 같게 나옵니다. 
steve.__proto__는 steve를 만들어내기 위해 사용된 Human.prototype에 상속받은 값이라는 의미입니다.

steve.toString()이라는 값을 콘솔에 쳐보면 값이 정해져 있습니다. 그런데 저는 Human에 toString()을 정의한 적이 없습니다. 왜 작동될까요. 모든 객체에는 toString()메소드가 있다고 합니다. Human역시 객체이기 때문에 위에서부터 어디선가 상속을 받아서 toString()을 사용할 수 있습니다. 그건 바로 제일 상위인 Object.prototype에 정의되어 있습니다.
steve.__proto__.__proto__ === Object.prototype
제 생각에는 이렇게 상위 객체로 부터 상속을 받아오는 것을 prototype Chain이라고 하는것 같습니다. 정확한 의미는 조금 더 공부를 해봐야 할 것 같습니다.


super, class

function Human(name){
	this.name = name;
}

Human.prototype.sleep = function(){console.log('zzz')};

let steve = new Human('steve')

let Student = function(name){
	Human.call(this, name);
}

Student.prototype = Object.create(Human.prototype);
Student.prototype.constructor = Student;
//js는 객체지향언어가 아니기 때문에 임의로 객체지향처럼 만들어줘야한다. Human의 prototype을 
//복사한 다음 Student에 붙여넣을 때 Student와 Student.prototype간의 생성자 관계가 
//애매해진다. 그러므로 생성자를 Student로 다시 정해줘야한다.
Student.prototype.learn = function(){console.log('나는 코딩 공부해')};

let john = new Student('john');
john.learn();
john.sleep();

es5형식으로 작성된 위의 코드를 es6의 class가 적용된 상태로 바꾸기 위해 class keyword를 써준다.

Class Human {
	constructor(name){
      this.name = name;
	}
    sleep(){
      console.log('zzz')
    }
}

let steve = new Human('steve')

Class Student extends Human{
	constructor(name){
      super(name);
    }
    learn(){
      console.log('나는 코딩 공부해')
    }
}
let john = new Student('john');
john.learn();
john.sleep();

class로 만든다면 생성자는 constructor안에 적어준다. this 전달하는 부분은 super로 대체할 수 있다. super는 부모의 오브젝트의 함수를 호출할 때 사용된다.

위에서 사용했던
Student.prototype = Object.create(Human.prototype);
Student.prototype.constructor = Student;
부분을 extends를 사용하여 대신할 수 있다.

profile
https://github.com/alstjd8826

0개의 댓글