✅ 프로토타입 (원형 객체)
💡 프로토타입이란, 자바스크립트에서 객체 상속을 위한 매커니즘이다.
💡 자바스크립트는 프로토타입 기반 언어이다.
: 객체를 상속할 때 프로토타입 방식을 사용한다.
모든 객체는 메소드와 속성을 상속받기 위한 템플릿으로써 프로토타입 객체를 가진다. (프로토타입 체인)
정확히 말하자면 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어 있다. -mdn
💡 자바스크립트의 함수는 일급객체이므로 프로토타입 객체를 가질 수 있다.
✔️ prototype
function Human(name,age) {
this.name = name;
this.age = age;
};
Human.prototype.constructor === Human;
>true클래스 Human을 생성하면,
Human의 원형 객체 Human.prototype이 함께 생성된다.
따라서 Human.prototype의 생성자는 Human이 된다.
✔️ __proto__
let female = new Human ('young', 10);
female.__proto__ === Human.prototype;
>true클래스 Human의 인스턴스 female을 생성하면,
상속받은 클래스(Human)의 prototype을 참조하는 female.__proto__가 함께 생성된다.
따라서 female.__proto__는 Human.prototype과 같다.
Learn more...
✔️ 프로토타입 체인
클래스 Human의 메서드를 정의하는 것은 다음과 같다.
Human.prototype.sayHi = function(){
console.log('Hi!')
};
female.sayHi();
>Hi!Human의 인스턴스 객체에서 .sayHi()메서드를 호출하면 Hi!가 출력된다는 것을 알 수 있다.
💡인스턴스 객체
female에sayHi라는 프로퍼티가 없는데도 메서드를 호출 할 수 있는 이유는?
객체에서 자체적으로 가지고 있지 않은 메서드를 호출할 경우,
그의 프로토타입 객체를 참조한다.
프로토타입 객체에도 없을 경우, 프로토타입의 프로토타입으로 타고 올라간다.
인스턴스.__proto__와 클래스.prototype은 상호 참조한다고 할 수 있다.
female.__proto__가 참조하는 Human.prototype에 해당 메서드가 있기에 원하는 결과를 출력할 수 있는 것이다.
.indexOf(), .slice() 등 다양한 객체 메서드를 사용하는 것도 이와 같다.
인스턴스 객체에서 Object라는 프로토타입 객체까지 올라가서 해당 메서드를 찾았기 때문이다.
// 메서드 정의 이후 새로 만들어지는 인스턴스도 동일하다.
let male = new Human('boy', 5);
male.sayHi();
>Hi그림으로 표현하면 다음과 같다.
https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes
