자바스크립트는 프로토타입 기반 언어, 클래스 기반 언어에서는 ‘상속'을 사용하는 반면, prototype 기반 언어에서는 어떤 객체를 원형(prototype)으로 삼고 이를 참조(복제)함으로써 상속과 비슷한 효과를 얻는다.
자바스크립트에는 클래스는 존재하지 않는다. 따라서 prototype != 상속, 복사를 통한 상속은 없다. prototype은 ‘연결'이다.
Person 이라는 함수를 정의하면 자바스크립트에서 함수는 객체이므로 Person 이라는 새로운객체가 생성된다. 그리고 Person의 prototype 객체가 하나 더 생긴다. Person 이라는 객체에는 prototype이라는 property가 생기고 그 프로퍼티는 Person의 프로토타입 객체를 가리킨다. Person의 prototype 객체로도 자신이 Person의 프로토타입 객체라는 것을 표시하기 위해 constructor라는 프로퍼티를 만들고, 이 프로퍼티는 Person을 가리킨다. 서로 간의 상호참조를 하고 있다.
- new 연산자가 새로운 객체를 빈 메모리 상에 생성한다.
- 생성된 빈 객체가 this 에 binding 된다.
- this 객체의 속성을 채우는 동작이 수행된다.
- return이 없다면 이렇게 만들어진 this가 return 된다.
Person.prototype.hometown = function () { }
Person의 prototype 객체에 찾아가서 hometown 이라는 property를 생성하고 함수를 정의한다.
객체를 찍어내는 공장인 Person이라는 Constructor 객체 (생성자 함수)를 만들어냈다.
let john= new Person(‘John’, 20, ‘male’);
let jay = new Person(‘Jay’, 20, ‘male’);자바스크립트에서는 원시값과 객체의 참조값만 복사할 뿐, 객체 자체나 코드 내용을 복사하는 깊은 복사를 수행할 수 없다.
생성자 함수를 사용하여 jay라고 하는 객체를 생성하면 Person 이라는 생성자 함수에 this 라는 값이 세팅되어 name, age, gender라는 프로퍼티가 생성됨과 동시에 __proto__ 가 생성된다. __proto__ 는 해당 객체를 생성한 생성자 함수의 prototype을 가리킨다.
console.log(john.name) //"John"
console.log(jay.age) // 20
console.log(jay.gender) //"male"jay.hometown()
생성자 함수를 사용하여 만든 john과 jay 객체가 갖고있는 프로퍼티에 위와 같이 접근할 수 있다. 이때, 해당 객체에 없는 hometown 프로퍼티를 호출하면 john과 jay를 생성한 Person의 prototype에 접근하여 프로퍼티를 찾는다. 결국 Person의 프로토타입 객체에서 hometown 프로퍼티를 찾아서 호출한다.
만약 Person.prototype.hometown = function () { } 선언해주지 않았다면? Person의 프로토타입을 찾아가고, 여기에서도 homtown을 찾지 못하고 Person을 만든 생성자 함수의 prototype을 찾아가고 여기서도 찾지 못하면 이런식의 연쇄를 지속하고 이는 Object라는 이름의 생성자 함수의 prototype에 도달했을 때 멈추게 되는데 여기에는 프로토 링크(_ _proto_ _) 안에 null 이 있기 때문에 더 이상 프로토타입 체이닝을 할 수 없다. 따라서 결과값은 undefined.
