Prototype

자바스크립트는 사실 객체지향언어 입니다.

객체 지향이라고 한다면 현실세계의 실체를 프로그램에 객체로 만들어 사용하는 개념인데, 자바스크립트의 대부분이 객체라고 할 수 있습니다.

객체를 만들때 안에 프로퍼티를 생성하고 키와 값으로 쌍으로 이루고 있는 모습입니다.

---

프로토 타입

객체 지향의 핵심 개념인 상속은 자바스크립트에서 프로토타입으로 상속과 같은 기능이 사용 가능합니다.

function circle(number){
    this.number = number;
    this.getArea = function(){
        return Math.PI * this.number ** 2;
    }
}

const circle1 = new circle(5);
const circle2 = new circle(10);

console.log(circle1.getArea());
console.log(circle2.getArea());

 원의 길이와 면적을 구하는 생성자 함수를 통해 두개의 객체를 만들었습니다.

중복코드가 발생하는데 이때 프로토 타입을 사용하면 중복없이 생성이 가능합니다.

function circle(number){
    this.number = number;
}

circle.prototype.getArea = function getArea(){
    return Math.PI * this.number ** 2;
};

const circle1 = new circle(5);
const circle2 = new circle(10);

console.log(circle1.getArea()); // 78.53981633974483
console.log(circle2.getArea()); // 314.1592653589793

---

__proto__ 접근자

 

하나의 객체를 다른 객체의 프로토타입으로 만들기 위해 접근하는 방식으로 __proto__접근자가 있습니다.

const parent = { name : 'Lee' };

const child = { age : 10 }; 

child.__proto__ = parent; 

console.log(child.name); // Lee

 

하지만 이런방식은 권장하는 방법은 아니므로 다른방법을 사용하는걸 권장드립니다.

const parent = { name : 'Lee' };

const child = { age : 10 }; 

// child의 __proto__ 프로퍼티 확인
Object.getPrototypeOf(child);

// child의 __proto__ 프로퍼티에 parent객체 주입
Object.setPrototypeOf(child, parent);

console.log(child.name); // Lee

---

함수 객체의 prototype

 

앞서 일반 객체의 프로토타입을 __proto__프로퍼티로 확인을 했지만 함수 객체의 프로토타입은 prototype프로퍼티로 확인 가능 합니다.

// 함수객체는 prototype프로퍼티를 갖는다.
console.log((function sample(){}).hasOwnProperty('prototype')); // true

// 일반 객체는 prototype프로퍼티를 갖지 않는다.
console.log({}.hasOwnProperty('prototype')); // false

 

prototype 프로퍼티는 생성자 함수가 생성할 객체의 프로토타입을 가리킨다.

따라서 생성자 함수로 호출할수 없는 함수인 non-constructor는 prototype프로퍼티를 갖지 않습니다.

화살표 함수, 축약 표현 메서드는 non-constructor이므로로 prototype 프로퍼티를 갖지 않는다.

const Person = name => { this.name = name };

console.log(Person.hasOwnProperty('prototype')); // false

console.log(Person.prototype); // undefined

const Child = {
    name : 'lee',
    foo(){}
};

console.log(Child.foo.hasOwnProperty('prototype')); // false

console.log(Child.foo.prototype); // undefined

 

그렇다면 생성자 함수의 prototype프로퍼티와 생성된 인스턴스 객체의 __proto__ 프로퍼티는 같을까?

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

const person = new Person('kim');

console.log(Person.prototype === person.__proto__); // true

객체의 __proto__프로퍼티와 함수 객체 prototype 프로퍼티는 결국 동일한 프로토 타입을 가리킵니다.

 

constructor

function person(name){
    this.name;
}

const me = new person();

console.log(me.constructor === person);

console.log(person === person.prototype.constructor);

모든 프로토 타입은 constructor 프로퍼티를 갖습니다. 이때 constructor 프로퍼티는 prototype 프로퍼티로 자신을 참조하고 있는 생성자 함수를 가리킵니다.

me의 생성자 constructor는 person 함수이고,  person.prototype의 생성자 constructor는 person이 됩니다.

 

그 외 리터럴의 생성자 함수와 프로토타입

리터럴 표기법	생성자 함수	프로토 타입
객체 리터럴	Object	Object.prototype
함수 리터럴	Function	Function.prototype
배열 리터럴	Array	Array.prototype
정규 표현식 리터럴	RegExp	RegExp.prototype