JS 프로토타입

프로토타입 prototype

 

자바스크립트에서 생성자는 prototype 프로퍼티를 통해 타입의 특징을 정의합니다. (ex : 붕어빵 틀)

 

효율적인 생성자 정의

 

인스턴스를 생성할 때마다 같은 내용의 별개의 함수가 계속 만들어진다면 효율적이지 못한 과정이라 볼 수 있다.

 

기본적인 모양새

 

각 인스턴스마다 같은 내용의 별개의 메서드가 계속 만들어진다

 

function Food(name) {
    this.name = name;
    this.smell = function () {
        console.log(this.name + " 냄새가 난다");
    }
}

 

향상된 버전

 

공통된 메서드를 정의해 사용

 

// 공통된 smell 메서드를 정의해 사용
function smell() {
    console.log(this.name + " 냄새가 난다");
}

function Food(name) {
    this.name = name;
    this.smell = smell;
}

var myFood = new Food("로제 파스타");
var myFood2 = new Food("창란젓");

myFood.smell();
myFood2.smell();

 

prototype 활용 버전

 

prototype 에 함수를 정의해 인스턴스 생성시 메서드가 생성됨

 

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

// Food 의 prototype 에 함수를 정의해 인스턴스 생성시 smell 메서드가 생성됨
Food.prototype.smell = function () {
    console.log(this.name + " 냄새가 난다");
}

var myFood = new Food("로제 파스타");
var myFood2 = new Food("청국장");

myFood.smell();        // "로제 파스타 냄새가 난다"
myFood2.smell();    // "청국장 냄새가 난다"

 

[[Prototype]] 프로퍼티

 

또한 모든 인스턴스는 내부에 [[Prototype]] 프로퍼티를 가지며 이를 통해 생성자의 prototype 프로퍼티를 추적할 수 있다.

 

프로토타입 체인

 

※ 인스턴스에서 생성자의 [[Prototype]] 을 타고 올라가며 프로퍼티를 탐색하는 현상을 프로토타입 체인이라고 합니다

 

참고

https://www.inflearn.com/course/%EC%BD%94%EB%94%A9%EC%9D%B8%ED%84%B0%EB%B7%B0-js-%EC%96%91%EC%84%B1%ED%95%99%EA%B5%90