자바스크립트의 new 키워드와 Object.create()

틀린 부분이 있을 경우, 지적해 주시면 감사하겠습니다.

 

이번에는 자바스크립트에서의 new가 어떤 역할을 하는 지, this의 new 바인딩이 어떻게 이루어지는지에 대해 알아보겠습니다.

 

「new 연산자는 사용자 정의 객체 타입 또는 내장 객체 타입의 인스턴스를 생성한다」

 

자바스크립트에서도 자바 처럼 new 키워드가 존재합니다. 그러나 인스턴스를 생성하는 전통적인 의미의 new와는 의미가 다릅니다.

 

「new 키워드는 일반 함수 호출 도중에 가로채어 원래 수행할 작업 외에 객체 생성이라는 잔업을 더 부과하는 지시자고 new로 호출되는 대상은 생성자가 아닌 그냥 일반 함수일 뿐이다」

 

먼저 생성자(constructor) 부터 다릅니다. 자바스크립트에서 생성자는 앞에 new 연산자가 있을 때 호출되는 일반 함수에 불과합니다.

그렇다면 함수 앞에 new를 붙여서 호출할 경우 어떠한 일이 일어날까요?

• 새 객체가 툭 만들어집니다.
• 새로 생성된 객체의 [[Prototype]]이 연결됩니다.
• 새로 생성된 객체는 해당 함수 호출 시 this로 바인딩 됩니다.
• 이 함수가 자신의 또 다른 객체를 반환하지 않는 한 new와 함께 호출된 함수는 자동으로 생성된 객체를 반환합니다.

그러면 이제 this의 new 바인딩 규칙을 보겠습니다.

function foo(a) {
	this.a = a;
}
var bar = new foo(2);
console.log(bar.a); // 2

앞에 new를 붙여 foo()를 호출했고 새로 생성된 객체는 foo 호출 시 this에 바인딩됩니다. 따라서 결국 new는 함수 호출 시 this를 새 객체와 바인딩하는 방법이며 이것이 new 바인딩입니다.

 

Object.create()와 new를 함께 쓴 코드를 살펴보겠습니다.

function Bread() {
	this.bagel = 'Bagel'
}

Bread.prototype.doughnut = 'Doughnut!';
var dunkin = new Bread();
var krispykreme = Object.create(Bread.prototype);

// new 키워드를 사용
console.log(dunkin.doughnut); // Doughnut
console.log(dunkin.bagel); // Bagel

// Object.create()를 사용
console.log(krispykreme.doughnut); // Doughnut
console.log(krispykreme.bagel); // undefined

Object.create()를 사용한 경우 krispykreme.bagel의 결과가 undefined로 나옵니다. new Bread는 constructor 코드를 실행하지만, Object.create는 constructor 코드를 실행하지 않기 때문입니다.

new도 Object.create() 도 모두 객체를 생성할 때 Bread 프로토타입을 상속하는 객체를 생성하기 때문에 doughnut은 알맞게 출력됩니다.

 

참고 및 출처

 

medium.com/@jonathanvox01/understanding-the-difference-between-object-create-and-the-new-operator-b2a2f4749358

Understanding the difference between Object.create() and the new operator.

You Don't Know JS [카일 심슨]