6. prototype 과 this 를 통한 함수 재활용

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

Animal.prototype.sleep = function () {
    console.log("sleep");
};

function Human (name, language) {
    this.name = name; // 이미 function Animal 에서 선언된 것으로 중복이 발생.
    this.language = language;
}

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

Human.prototype.write = function () {
    console.log("write");
}

var dog = new Animal("badooki");
var Mung = new Human("Mung", "korean");

 

이제 저 중복을 줄여봅시다

 

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

Animal.prototype.sleep = function () {
  console.log("sleep");
};

function Human(name, language) {
  Animal.call(this, name);
  this.language = language;
}

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

Human.prototype.write = function () {
  console.log("write");
};

var dog = new Animal("badooki");
var Mung = new Human("Mung", "korean");

 

1.

var Mung = new Human("Mung", "korean");

new 구문을 사용하여 빈 객체인 this 가 생성되었다.

그리고 Human 이 선언된 function Human () 함수를 찾아가면,

Animal.call(this, name); 가 선언되어 있는 것을 볼 수 있다.

call은 . 앞의 생성자 함수를 호출해주는 기능을 갖고 있고, 이 구문에서의 this 는 앞서 new Human에서 생성된 this 다.

즉, this < == > human의 instance 라는 것.

 

2. 

Animal.call(this, name); 이 실행되면

Animal 함수가 실행되고, 함수 속 this 를 판별하려면 Animal 함수가 실행되는 곳을 봐야함.

그런데, 앞서 실행된 Animal.call(this, name); 에서 this는 Human의 instance로 정해졌으므로

 

function Animal(name) {

this.name = name; }

 

함수 속 this = human의 instance.

 

3.

우선 Animal.call(this, name); 안의 this를 파악하기 위해 Human 함수가 실행된 곳을 찾아감. ==>

new Human을 통해 this 는 Human의 instance 라는 것을 파악 ==>

Human.prototype.name 이 있는지 파악 ==>

존재하지 않으므로 Human의 상위 오브젝트인 Animal 함수에서 찾는데 그 안에 this.name = name 으로 선언되어 있음.

여기서 Animal이 Human의 상위 오브젝트인 이유는 Human 함수를 선언해주는 구문 안에 

call 메소드를 이용해 Animal 생성자 함수로부터 this 와 name을 불러왔기 때문.

prototype chain! 

즉 this.name 은 Human 에서 정의된 Mung 이 됨.

 

이제 또 다른 중복인 sleep 을 건드려봅시다. 

 

 

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

Animal.prototype.sleep = function () {
  console.log("sleep");
};

function Human(name, language) {
  Animal.call(this, name);
  this.language = language;
}

Human.prototype = Object.create(Animal.prototype);
Human.prototype.constructor = Human;

// object.create 메소드를 사용함으로서 Human 을 sleep 을 찾아본 후 없으면 바로 object 속 sleep을 찾는 것이 아닌 !
// Animal을 검색해보고 그래도 없으면 Object를 검색해보도록 만듦.

Human.prototype.write = function () {
  console.log("write");
};

var dog = new Animal("badooki");
var Mung = new Human("Mung", "korean");

 

정리하면, 

prototype 을 검색하는 과정이 Human --> Object 에서 

 

Human --> Animal --> Object  로 바뀐 것이다.