[JS] 객체 생성 방식별 프로토타입

01. 객체의 생성방식

---

객체는 다음과 같은 방법으로 생성 가능하다.

✔️ 객체 리터럴
✔️ Object 생성자 함수
✔️ 생성자 함수
✔️ Object.create
✔️ 클래스(ES6)

세부적인 생성 방식에 차이가 있으나,

추상 연산에 의해 생성된다는 공통점이 있다.

 

추상 연산 OrdinaryObjectCreate는 필수적으로 생성할 객체의 프로토타입을 인수로 받는다.

 

먼저, 추상연산 OrdinaryObjectCreate는 빈 객체를 생성하고

객체에 추가할 프로퍼티 목록이 인수로 전달된 경우에만 프로퍼티를 객체에 추가한다.

 

인수로 전달 받은 프로토타입은 [[Prototype]] 내부 슬롯에 할당된 다음, 생성 객체를 반환한다.

따라서 프로토타입은 OrdinaryObjectCreate에 전달받은 인수에 의해 결정된다.

 

[JS] 프로토타입 생성 시점

프로토타입 생성 시점 포스팅에 의해 이미 프로토타입은 생성자 함수 과정에서 결정되어있다.

따라서, 프로토타입의 결정은 OrdinaryObjectCreate 인수에 의해 결정되는 것이다.

 

02. 객체 리터럴의 프로토타입

---

추상 연산 OrdinaryObjectCreate에 의해 전달된 프로토타입은 Object.prototype이다.

const minda = { age: 24 };

객체가 평가되면 Object 생성자 함수와 Object.prototype 간에 연결이 만들어진다.

이렇게 minda는 Object.prototype을 상속받을 수 있다.

 

minda 객체는 상속 받은 Object.prototype의

constructor 프로퍼티와 hasOwnProperty 메서드를 자유롭게 사용할 수 있다.

 

03. Object 생성자 함수의 프로토타입

---

생성자 함수를 인수 없이 호출하면 빈 객체가 생성된다.

마찬가지로 호출시에 OrdinaryObjectCreate가 호출된다.

 

이때 추상 연산 OrdinaryObjectCreate에 전달되는 프로토타입은 Object.prototype이다.

Object 생성자 함수의 프로토타입이다.

 

즉, 객체 리터럴에 의해 생성된 객체와 동일한 구조를 갖는다.

const minda = new Minda();
minda.age = 24;

console.log(minda.constructor === Object); // true
console.log(minda.hasOwnProperty('x')); // true

 

다만 추가 방식에 차이가 있다.

객체 리터럴은 객체 리터럴 내부에 프로퍼티를 추가하지만

Object 생성자 함수는 일단 빈 객체를 생성한 후에만 추가할 수 있다.

 

04. 생성자 함수의 프로토타입

---

new 연산자와 함께 인스턴스를 생성해도 OrdinaryObjectCreate가 호출된다.

이때 OrdinaryObjectCreate에 인수로 전달되는 프로토타입은

생성자함수 prototype 프로퍼티에 바인딩 되어있다.

 

즉, 객체의 프로토타입은 생성자 함수 prototype 프로퍼티에 바인딩되어 있는 객체다.

function Minda(age) {
	this.age = age;
}

const minda1 = new Minda('24');

사용자 정의 함수인 Minda와 프로토타입 Minda.prototype의 프로퍼티는 constructor 뿐이다.

 

프로토타입은 객체이며, 일반 객체처럼 프로퍼티를 추가/삭제할 수 있다.

이렇게 추가 / 삭제된 프로퍼티는 프로토타입 체인에 즉각 반영된다.

 

function Minda(age) {
	this.age = age;
}

const minda1 = new Minda('24');

Minda.prototype.sleep = funtion() {
	console.log(`나는 ${this.age}살에도 잠만 잡니다.`);
};

const minda1 = new Minda('Yeeeeh');
const minda2 = new Minda('Oooooh');

minda1.sayHello();
minda2.sayHello();