πŸ“‹ λͺ¨λ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ Deep Dive | 17μž₯ μƒμ„±μž ν•¨μˆ˜μ— μ˜ν•œ 객체 생성

waterglassesΒ·2022λ…„ 4μ›” 13일
0
post-thumbnail

λͺ¨λ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ Deep Dive λ„μ„œμ˜ 17μž₯을 μ •λ¦¬ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

17.1 Object μƒμ„±μž ν•¨μˆ˜

new μ—°μ‚°μžμ™€ Object μƒμ„±μž ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜λ©΄ 빈 객체λ₯Ό μƒμ„±ν•΄μ„œ λ°˜ν™˜ν•œλ‹€. 빈 객체λ₯Ό μƒμ„±ν•œ 이후 ν”„λ‘œνΌν‹° λ˜λŠ” λ©”μ„œλ“œλ₯Ό μΆ”κ°€ν•˜μ—¬ 객체λ₯Ό μ™„μ„±ν•  수 μžˆλ‹€.

const person = new Object();

person.name = 'Lee';
person.sayHello = function (){
	console.log('Hi! My name is ' + this.name);
}

console.log(person); //{name: "Lee", sayHello : f}

μƒμ„±μž ν•¨μˆ˜λž€ new μ—°μ‚°μžμ™€ ν•¨κ»˜ ν˜ΈμΆœν•˜μ—¬ 객체λ₯Ό μƒμ„±ν•˜λŠ” ν•¨μˆ˜λ₯Ό λ§ν•œλ‹€. μƒμ„±μž ν•¨μˆ˜μ— μ˜ν•΄ μƒμ„±λœ 객체λ₯Ό μΈμŠ€ν„΄μŠ€λΌ ν•œλ‹€.

Object μƒμ„±μž ν•¨μˆ˜ 이외에도 String, Number, Boolean, Function, Array, Date, RegExp, Promise λ“±μ˜ 빌트인 μƒμ„±μž ν•¨μˆ˜λ₯Ό μ œκ³΅ν•œλ‹€.

ex) Function μƒμ„±μž ν•¨μˆ˜

const func = new Function ('x', 'return x * x');
console.log(typeof func); //function
console.dir(func); // f anonymous(x)

Object μƒμ„±μž ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•΄μ„œ 객체 μƒμ„±ν•˜λŠ” 방식은 νŠΉλ³„ν•œ μ΄μœ κ°€ μ—†μœΌλ©΄ 그닀지 μœ μš©ν•΄ 보이지 μ•ŠλŠ”λ‹€.

17.2 μƒμ„±μž ν•¨μˆ˜

17.2.1 객체 λ¦¬ν„°λŸ΄μ— μ˜ν•œ 객체 생성 λ°©μ‹μ˜ 문제점

객체 λ¦¬ν„°λŸ΄μ— μ˜ν•œ 객체 생성 방식은 단 ν•˜λ‚˜μ˜ κ°μ²΄λ§Œμ„ μƒμ„±ν•œλ‹€. λ™μΌν•œ ν”„λ‘œνΌν‹°λ₯Ό κ°–λŠ” 객체λ₯Ό μ—¬λŸ¬ 개 생성해야 ν•˜λŠ” 경우 맀번 같은 ν”„λ‘œνΌν‹°λ₯Ό κΈ°μˆ ν•΄μ•Ό ν•˜κΈ° λ•Œλ¬Έμ— λΉ„νš¨μœ¨μ μ΄λ‹€.

17.2.2 μƒμ„±μž ν•¨μˆ˜μ— μ˜ν•œ 객체 생성 λ°©μ‹μ˜ μž₯점

마치 객체(μΈμŠ€ν„΄μŠ€)λ₯Ό μƒμ„±ν•˜κΈ° μœ„ν•œ ν…œν”Œλ¦Ώ(클래슀)처럼 μƒμ„±μž ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•˜μ—¬ ν”„λ‘œνΌν‹° ꡬ쑰가 λ™μΌν•œ 객체 μ—¬λŸ¬ 개λ₯Ό κ°„νŽΈν•˜κ²Œ 생성할 수 μžˆλ‹€.

functon Circle(radius){
	this.radius = radius;
    this.getDiameter = function () {
    	return 2 * this.radius;
    }
}

// μΈμŠ€ν„΄μŠ€μ˜ 생성
const circle1 = new Circle(5); 
const circle2 = new circle(10);

console.log(circle1.getDiaameter()); //10
console.log(circle2.getDiaameter()); //20

μƒμ„±μž ν•¨μˆ˜λŠ” 이름 κ·ΈλŒ€λ‘œ 객체λ₯Ό μƒμ„±ν•˜λŠ” ν•¨μˆ˜λ‹€. 일반 ν•¨μˆ˜μ™€ λ™μΌν•œ λ°©λ²•μœΌλ‘œ μƒμ„±μž ν•¨μˆ˜λ₯Ό μ •μ˜ν•˜κ³  new μ—°μ‚°μžμ™€ ν•¨κ»˜ ν˜ΈμΆœν•˜λ©΄ ν•΄λ‹Ή ν•¨μˆ˜λŠ” μƒμ„±μž ν•¨μˆ˜λ‘œ λ™μž‘ν•œλ‹€. new μ—°μƒμžμ™€ ν•¨κ»˜ ν˜ΈμΆœν•˜μ§€ μ•ŠμœΌλ©΄ 일반 ν•¨μˆ˜λ‘œ λ™μž‘ν•œλ‹€.

// new μ—°μ‚°μžμ˜€ ν•¨κ»˜ ν˜ΈμΆœν•˜μ§€ μ•ŠμœΌλ©΄ μƒμ„±μž ν•¨μˆ˜λ‘œ λ™μž‘ν•˜μ§€ μ•ŠλŠ”λ‹€. => 일반 ν•¨μˆ˜λ‘œμ„œ λ™μž‘
const circle3 = Circle(15);
console.log(circle3); // undefined : λ°˜ν™˜λ¬Έμ΄ μ—†μœΌλ―€λ‘œ
console.log(radius); // 일반 ν•¨μˆ˜λ‘œμ„œ 호좜된 Circle λ‚΄μ˜ thisλŠ” μ „μ—­ 객체λ₯Ό 가리킨닀.

πŸ–πŸ» thisλž€?
thisλŠ” 객체 μžμ‹ μ˜ ν”„λ‘œνΌν‹°λ‚˜ λ©”μ„œλ“œλ₯Ό μ°Έμ‘°ν•˜κΈ° μœ„ν•œ 자기 μ°Έμ‘° λ³€μˆ˜λ‹€. thisκ°€ κ°€λ¦¬ν‚€λŠ” κ°’, 즉 this 바인딩은 ν•¨μˆ˜ 호좜 방식에 따라 λ™μ μœΌλ‘œ κ²°μ •λœλ‹€.

ν•¨μˆ˜ 호좜 방식thisκ°€ κ°€λ¦¬ν‚€λŠ” κ°’(this 바인딩)
일반 ν•¨μˆ˜λ‘œμ„œ ν˜ΈμΆœμ „μ—­ 객체
λ©”μ„œλ“œλ‘œμ„œ ν˜ΈμΆœλ©”μ„œλ“œλ₯Ό ν˜ΈμΆœν•œ 객체(λ§ˆμΉ¨ν‘œ μ•žμ˜ 객체)
μƒμ„±μž ν•¨μˆ˜λ‘œμ„œ ν˜ΈμΆœμƒμ„±μž ν•¨μˆ˜κ°€ (λ―Έλž˜μ—) 생성할 μΈμŠ€ν„΄μŠ€
function foo(){
	console.log(this);
}

// 일반적인 ν•¨μˆ˜λ‘œμ„œ 호좜
// μ „μ—­ κ°μ²΄λŠ” λΈŒλΌμš°μ € ν™˜κ²½μ—μ„œλŠ” window, Node.js ν™˜κ²½μ—μ„œλŠ” global을 가리킨닀.
foo(); // window

// λ©”μ„œλ“œλ‘œμ„œ 호좜
const obj = { foo }; // ES6 ν”„λ‘œνΌν‹° μΆ•μ•½ ν‘œν˜„
obj.foo(); // obj

// μƒμ„±μž ν•¨μˆ˜λ‘œμ„œ 호좜
const inst = new foo(); //inst

17.2.3 μƒμ„±μž ν•¨μˆ˜μ˜ μΈμŠ€ν„΄μŠ€ 생성 κ³Όμ •

μƒμ„±μž ν•¨μˆ˜μ˜ 역할을 ν”„λ‘œνΌν‹° ꡬ쑰갇 λ™μΌν•œ μΈμŠ€ν„΄μŠ€λ₯Ό μƒμ„±ν•˜κΈ° μœ„ν•œ ν…œν”Œλ¦Ώ(클래슀)μœΌλ‘œμ„œ λ™μž‘ν•˜μ—¬ μΈμŠ€ν„΄μŠ€λ₯Ό μƒμ„±ν•˜λŠ” 것과 μƒμ„±λœ μΈμŠ€ν„΄μŠ€λ₯Ό μ΄ˆκΈ°ν™”ν•˜λŠ” 것이닀.

μƒμ„±μž ν•¨μˆ˜κ°€ μΈμŠ€ν„΄μŠ€λ₯Ό μƒμ„±ν•˜λŠ” 것은 ν•„μˆ˜μ΄κ³  μƒμ„±λœ μΈμŠ€ν„΄μŠ€λ₯Ό μ΄ˆκΈ°ν™”ν•˜λŠ” 것은 μ˜΅μ…˜μ΄λ‹€.

1. μΈμŠ€ν„΄μŠ€ 생성과 this 바인딩
μ•”λ¬΅μ μœΌλ‘œ 빈 객체가 μƒμ„±λœλ‹€. 이 객체가 λ°”λ‘œ μƒμ„±μž ν•¨μˆ˜κ°€ μƒμ„±ν•œ μΈμŠ€ν„΄μŠ€μ΄λ‹€. 그리고 μ•”λ¬΅μ μœΌλ‘œ μƒμ„±λœ 빈 객체, 즉 μΈμŠ€ν„΄μŠ€λŠ” this에 바인딩(μ‹λ³„μžλž‘ 값을 μ—°κ²°ν•˜λŠ” κ³Όμ •)λœλ‹€.

2. μΈμŠ€ν„΄μŠ€ μ΄ˆκΈ°ν™”
μƒμ„±μž ν•¨μˆ˜μ— κΈ°μˆ λ˜μ–΄ μžˆλŠ” μ½”λ“œκ°€ ν•œ 쀄씩 μ‹€ν–‰λ˜μ–΄ this에 λ°”μΈλ”©λ˜μ–΄ μžˆλŠ” μΈμŠ€ν„΄μŠ€λ₯Ό μ΄ˆκΈ°ν™”ν•œλ‹€. 즉, this에 λ°”μΈλ”©λ˜μ–΄ μžˆλŠ” μΈμŠ€ν„΄μŠ€μ— ν”„λ‘œνΌν‹°λ‚˜ λ©”μ„œλ“œλ₯Ό μΆ”κ°€ν•˜κ³  μƒμ„±μž ν•¨μˆ˜κ°€ 인수둜 전달받은 μ΄ˆκΈ°κ°’μ„ μΈμŠ€ν„΄μŠ€ ν”„λ‘œνΌν‹°μ— ν• λ‹Ήν•˜μ—¬ μ΄ˆκΈ°ν™”ν•˜κ±°λ‚˜ 고정값을 ν• λ‹Ήν•œλ‹€.

3. μΈμŠ€ν„΄μŠ€ λ°˜ν™˜
μƒμ„±μž ν•¨μˆ˜ λ‚΄λΆ€μ˜ λͺ¨λ“  μ²˜λ¦¬κ°€ λλ‚˜λ©΄ μ™„μ„±λœ μΈμŠ€ν„΄μŠ€κ°€ λ°”μΈλ”©λœ thisκ°€ μ•”λ¬΅μ μœΌλ‘œ λ°˜ν™˜λœλ‹€.

function Circle(radius){
	// 1. μ•”λ¬΅μ μœΌλ‘œ μΈμŠ€ν„΄μŠ€κ°€ μƒμ„±λ˜κ³  this에 λ°”μΈλ”©λœλ‹€.
    console.log(this); // Circle{}
    
    // 2. this에 바인딩 λ˜μ–΄ μžˆλŠ” μΈμŠ€ν„΄μŠ€λ₯Ό μ΄ˆκΈ°ν™”ν•œλ‹€.
    this.radius = radius;
    this.getDiagmeter = function(){
    	return 2 * this.radius;
    }
    
    // 3. μ™„μ„±λœ μΈμŠ€ν„΄μŠ€κ°€ λ°”μΈλ”©λœ thisκ°€ μ•”λ¬΅μ μœΌλ‘œ λ°˜ν™˜λœλ‹€.
}

// μΈμŠ€ν„΄μŠ€ 생성. Circle μƒμ„±μž ν•¨μˆ˜λŠ” μ•”λ¬΅μ μœΌλ‘œ thisλ₯Ό λ°˜ν™˜ν•œλ‹€.
const circle = new Circle(1);
console.log(circle); // Circle {radius: 1, getDiameter: f}

λ§Œμ•½ thisκ°€ μ•„λ‹Œ λ‹€λ₯Έ 객체λ₯Ό λͺ…μ‹œμ μœΌλ‘œ λ°˜ν™˜ν•˜λ©΄ thisκ°€ λ°˜ν™˜λ˜μ§€ λͺ»ν•˜κ³  return 문에 λͺ…μ‹œν•œ 객체가 λ°˜ν™˜λœλ‹€. ν•˜μ§€λ§Œ λͺ…μ‹œμ μœΌλ‘œ μ›μ‹œ 값을 λ°˜ν™˜ν•˜λ©΄ μ›μ‹œ κ°’ λ°˜ν™˜μ€ λ¬΄μ‹œλ˜κ³  μ•”λ¬΅μ μœΌλ‘œ thisκ°€ λ°˜ν™˜λœλ‹€.

function Circle(radius){
	...
    return 100
};

const circle = new Circle(1);
console.log(circle); // Circle {radius: 1, getDiameter: f}

λ”°λΌμ„œ μƒμ„±μž ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ return 문을 λ°˜λ“œμ‹œ μƒλž΅ν•΄μ•Ό ν•œλ‹€.

17.2.4 λ‚΄λΆ€ λ©”μ„œλ“œ [[Call]]κ³Ό [[Construct]]

ν•¨μˆ˜λŠ” κ°μ²΄μ΄λ―€λ‘œ 일반 객체와 λ™μΌν•˜κ²Œ λ™μž‘ν•  수 μžˆλ‹€. ν•¨μˆ˜ κ°μ²΄λŠ” 일반 객체가 가지고 μžˆλŠ” λ‚΄λΆ€ 슬둯과 λ‚΄λΆ€ λ©”μ„œλ“œλ₯Ό λͺ¨λ‘ 가지고 있기 λ•Œλ¬Έμ΄λ‹€.

ν•¨μˆ˜λŠ” κ°μ²΄μ΄μ§€λ§Œ 일반 κ°μ²΄μ™€λŠ” λ‹€λ₯΄λ‹€. 일반 κ°μ²΄λŠ” ν˜ΈμΆœν•  수 μ—†μ§€λ§Œ ν•¨μˆ˜λŠ” ν˜ΈμΆœν•  수 μžˆλ‹€. λ”°λΌμ„œ ν•¨μˆ˜ κ°μ²΄λŠ” 일반 객체가 가지고 μžˆλŠ” λ‚΄λΆ€ 슬둯과 λ‚΄λΆ€ λ©”μ„œλ“œλŠ” λ¬Όλ‘ , ν•¨μˆ˜λ‘œμ„œ λ™μž‘ν•˜κΈ° μœ„ν•΄ ν•¨μˆ˜ κ°μ²΄λ§Œμ„ μœ„ν•œ [[Environment]], [[FormalParameters]] λ“±μ˜ λ‚΄λΆ€ 슬둯과 [[Call]]κ³Ό [[Construct]] 같은 λ‚΄λΆ€ λ©”μ„œλ“œλ₯Ό μΆ”κ°€λ‘œ 가지고 μžˆλ‹€.

ν•¨μˆ˜κ°€ 일반 ν•¨μˆ˜λ‘œμ„œ 호좜

  • ν•¨μˆ˜ 객체 λ‚΄λΆ€μ˜ λ©”μ„œλ“œ [[Call]]이 ν˜ΈμΆœλœλ‹€.

new μ—°μ‚°μžμ™€ ν•¨κ»˜ μƒμ„±μž ν•¨μˆ˜λ‘œμ„œ 호좜

  • λ‚΄λΆ€ λ¨Έμ„Έλ“œ [[Construct]]κ°€ ν˜ΈμΆœλœλ‹€.

λ‚΄λΆ€ λ©”μ„œλ“œ [[Call]]을 κ°–λŠ” ν•¨μˆ˜ 객체

  • callable둜 λΆ€λ₯Έλ‹€. callable은 ν˜ΈμΆœν•  수 μžˆλŠ” 객체, 즉 ν•¨μˆ˜λ₯Ό 말함
  • λͺ¨λ“  ν•¨μˆ˜ 객체가 κ°–λŠ” λ‚΄λΆ€ λ©”μ„œλ“œμ΄λ‹€.

λ‚΄λΆ€ λ©”μ„œλ“œ [[Contruct]]λ₯Ό κ°–λŠ” ν•¨μˆ˜ 객체

  • constructor둜 λΆ€λ₯΄κ³  μƒμ„±μž ν•¨μˆ˜λ‘œμ„œ 호좜 ν•  수 μžˆλŠ” ν•¨μˆ˜λ₯Ό μ˜λ―Έν•œλ‹€.

[[Contruct]]λ₯Ό 갖지 μ•ŠλŠ” ν•¨μˆ˜ 객체

  • non-constructor둜 λΆ€λ₯΄κ³  객체λ₯Ό μƒμ„±μž ν•¨μˆ˜λ‘œμ„œ ν˜ΈμΆœν•  수 μ—†λŠ” ν•¨μˆ˜λ₯Ό 의미

17.2.5 constructor와 non-constructor의 ꡬ뢄

μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 ν•¨μˆ˜ μ •μ˜ 방식에 따라 ν•¨μˆ˜λ₯Ό constructor와 non-constructor둜 κ΅¬λΆ„ν•œλ‹€.

  • constructor: ν•¨μˆ˜ μ„ μ–Έλ¬Έ, ν•¨μˆ˜ ν‘œν˜„μ‹, 클래슀
  • non-constructor: λ©”μ„œλ“œ, ν™”μ‚΄ν‘œν•¨μˆ˜
// 일반 ν•¨μˆ˜ μ •μ˜(ν•¨μˆ˜ μ„ μ–Έλ¬Έ, ν•¨μˆ˜ ν‘œν˜„μ‹)
function foo(){}
const bar = function () {};

// ν”„λ‘œνΌν‹° x의 κ°’μœΌλ‘œ ν• λ‹Ήλœ 것은 일반 ν•¨μˆ˜λ‘œ μ •μ˜λœ ν•¨μˆ˜λ‹€. μ΄λŠ” λ©”μ„œλ“œλ‘œ μΈμ •ν•˜μ§€ μ•ŠλŠ”λ‹€.
const baz = {
	x: function() {}
}

// 일반 ν•¨μˆ˜λ‘œ μ •μ˜λœ ν•¨μˆ˜λ§Œμ΄ constructor이닀.
new foo(); // foo {}
new bar(); // bar {}
new baz.x(); // x {}

// ν™”μ‚΄ν‘œ ν•¨μˆ˜ μ •μ˜
const arrow = () => {};

new arrow(); // TypeError: arrow is not a constructor

// λ©”μ„œλ“œ μ •μ˜: ES6의 λ©”μ„œλ“œ μΆ•μ•½ ν‘œν˜„λ§Œ λ©”μ„œλ“œλ‘œ μΈμ •ν•œλ‹€.
const obj = {
	x(){}
}

new obj.x(); //TypeError: obj.x is not a contstructor

⚠️ μ£Όμ˜ν•  점
μƒμ„±μž ν•¨μˆ˜λ‘œμ„œ 호좜될 것을 κΈ°λŒ€ν•˜κ³  μ •μ˜ν•˜μ§€ μ•Šμ€ 일반 ν•¨μˆ˜(callableμ΄λ©΄μ„œ constructor)에 new μ—°μ‚°μžλ₯Ό λΆ™μ—¬ ν˜ΈμΆœν•˜λ©΄ μƒμ„±μž ν•¨μˆ˜μ²˜λŸΌ λ™μž‘ν•  수 μžˆλ‹€λŠ” 것

function() {}

foo(); // 일반 ν•¨μˆ˜λ‘œμ„œ 호좜 => [[Call]]이 호좜됨
new foo(); // μƒμ„±μž ν•¨μˆ˜λ‘œμ„œ 호좜 => [[Construct]]κ°€ 호좜

17.2.6 new μ—°μ‚°μž

new μ—°μ‚°μžμ™€ ν•¨κ»˜ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜λ©΄ [[Construct]]κ°€ ν˜ΈμΆœλœλ‹€. 단, new μ—°μ‚°μžμ™€ ν•¨κ»˜ ν˜ΈμΆœν•˜λŠ” ν•¨μˆ˜λŠ” non-constructorκ°€ μ•„λ‹Œ constructor이어야 ν•œλ‹€.

new μ—°μ‚°μž 없이 μƒμ„±μž ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜λ©΄ 일반 ν•¨μˆ˜λ‘œ ν˜ΈμΆœλœλ‹€. 즉 ν•¨μˆ˜ 객체의 λ‚΄λΆ€ λ©”μ„œλ“œκ°€ [[Call]]이 ν˜ΈμΆœλœλ‹€.

function Circle(radius){
    this.radius = radius;
    this.getDiagmeter = function(){
    	return 2 * this.radius;
    }
}

const circle = Circle(5); //new μ—°μ‚°μž 없이 μƒμ„±μž ν•¨μˆ˜ 호좜
console.log(circle); // undefined

// 일반 ν•¨μˆ˜ λ‚΄λΆ€μ˜ thisλŠ” μ „μ—­ 객체 windowλ₯Ό 가리킨닀. (new 없이 μƒμ„±ν–ˆκΈ° λ•Œλ¬Έμ—)
// λ”°λΌμ„œ radius와 getDiameter λ©”μ„œλ“œλŠ” μ „μ—­ 객체의 ν”„λ‘œνΌν‹°μ™€ λ©”μ„œλ“œκ°€ λœλ‹€.
console.log(radius); //5
console.log(getDiameter()); // 10

circle.getDiameter();
// TypeError: Cannot read property 'getDiameter' of undefined

일반 ν•¨μˆ˜μ™€ μƒμ„±μž ν•¨μˆ˜μ— νŠΉλ³„ν•œ ν˜•μ‹μ  μ°¨μ΄λŠ” μ—†λ‹€. λ”°λΌμ„œ μƒμ„±μž ν•¨μˆ˜λŠ” 일반적으둜 첫 문자λ₯Ό λŒ€λ¬Έμžλ‘œ κΈ°μˆ ν•˜λŠ” 파슀칼 μΌ€μ΄μŠ€λ‘œ λͺ…λͺ…ν•˜μ—¬ 일반 ν•¨μˆ˜μ™€ ꡬ별할 수 μžˆλ„λ‘ λ…Έλ ₯ν•œλ‹€.

17.2.7 new.target

μƒμ„±μž ν•¨μˆ˜κ°€ new μ—°μ‚°μž 없이 ν˜ΈμΆœλ˜λŠ” 것을 λ°©μ§€ν•˜κΈ° μœ„ν•΄ 파슀칼 μΌ€μ΄μŠ€ μ»¨λ²€μ…˜μ„ μ‚¬μš©ν•œλ‹€ ν•˜λ”λΌλ„ μ‹€μˆ˜λŠ” μ–Έμ œλ‚˜ λ°œμƒν•  수 μžˆλ‹€. μ΄λŸ¬ν•œ μœ„ν—˜μ„±μ„ νšŒν”Όν•˜κΈ° μœ„ν•΄ ES6μ—μ„œλŠ” new.target을 μ§€μ›ν•œλ‹€.

new.target

  • this와 μœ μ‚¬ν•˜κ²Œ constructor인 λͺ¨λ“  ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ 암묡적인 지역 λ³€μˆ˜μ™€ 같이 μ‚¬μš©λ˜λ©° 메타 ν”„λ‘œνΌν‹° 라고 λΆ€λ₯Έλ‹€.
  • IEμ—μ„œλŠ” μ§€μ›ν•˜μ§€ μ•ŠμœΌλ―€λ‘œ μ£Όμ˜ν•˜μž.(지원 ν•˜λŠ”κ²Œ λ“œλ¬Όμ§€ μ•Šμ„κΉŒ^^)
  • ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ μ‚¬μš©ν•˜λ©΄ new μ—°μ‚°μžμ™€ ν•¨κ»˜ μƒμ„±μž ν•¨μˆ˜λ‘œμ„œ ν˜ΈμΆœλ˜μ—ˆλŠ”μ§€ 확인할 수 μžˆλ‹€.
  • new μ—°μ‚°μžμ™€ ν•¨κ»˜ μƒμ„±μž ν•¨μˆ˜λ‘œμ„œ 호좜되면 ν•¨μˆ˜ λ‚΄λΆ€μ˜ new.target은 ν•¨μˆ˜ μžμ‹ μ„ 가리킨닀.
  • new μ—°μ‚°μž 없이 일반 ν•¨μˆ˜λ‘œμ„œ 호좜된 ν•¨μˆ˜ λ‚΄λΆ€μ˜ new.target은 undefinedλ‹€.
function Circle(radius){
	// λ°©μ–΄μ½”λ“œ(μž¬κ·€ ν˜ΈμΆœμ„ 톡해 μƒμ„±μž ν•¨μˆ˜λ‘œμ„œ 호좜)
	if(!new.target){
    	return new Circle(radius);
    }
    
    this.radius = radius;
    this.getDiameter = function () {
    	return 2 * this.radius;
    }
}

// new μ—°μ‚°μž 없이 μƒμ„±μž ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜μ—¬λ„ new.target을 톡해 μƒμ„±μž ν•¨μˆ˜λ‘œμ„œ ν˜ΈμΆœλœλ‹€.
const circle = Circle(5);
console.log(circle.getDiameter());

μŠ€μ½”ν”„ 세이프 μƒμ„±μž νŒ¨ν„΄

new.target을 μ‚¬μš©ν•  수 μ—†λŠ” 상황에 μ‚¬μš©ν•œλ‹€.

function Circle(radius){
	if(!(this instancef Circle)){
    	return new Circle(radius);
    }
    ...
}

이 ν•¨μˆ˜κ°€ new μ—°μ‚°μžμ™€ ν•¨κ²Œ ν˜ΈμΆœλ˜μ§€ μ•Šμ•˜λ‹€λ©΄ thisλŠ” μ „μ—­ 객체 windowλ₯Ό 가리킀고 this와 Circle은 ν”„λ‘œν† νƒ€μž…μ— μ˜ν•΄ μ—°κ²°λ˜μ§€ μ•ŠλŠ”λ‹€. λ”°λΌμ„œ instanceof μ—°μ‚°μžλ₯Ό μ΄μš©ν•΄μ„œ νŒλ³„ 후에 new μ—°μ‚°μžμ™€ ν•¨κ»˜ ν˜ΈμΆœν•˜μ—¬ μƒμ„±λœ μΈμŠ€ν„΄μŠ€λ₯Ό λ°˜ν™˜ν•΄μ•Ό ν•œλ‹€.

instanceof μ—°μ‚°μž

  • μƒμ„±μžμ˜ prototype 속성이 객체의 ν”„λ‘œν† νƒ€μž… 체인 μ–΄λ”˜κ°€ μ‘΄μž¬ν•˜λŠ”μ§€ νŒλ³„

빌트인 μƒμ„±μž ν•¨μˆ˜μ—μ„œμ˜ new

  • 빌트인 μƒμ„±μž ν•¨μˆ˜(Object.String, Number, Boolean, Function, array, Date, RegExp, Promise λ“±)λŠ” new μ—°μ‚°μžμ™€ ν•¨κ»˜ ν˜ΈμΆœλ˜μ—ˆλŠ”μ§€λ₯Ό ν™•μΈν•œ ν›„ μ μ ˆν•œ 값을 λ°˜ν™˜ν•œλ‹€.

  • 예λ₯Ό λ“€μ–΄ Object와 Function μƒμ„±μž ν•¨μˆ˜λŠ” new μ—°μ‚°μž 없이 ν˜ΈμΆœν•΄λ„ new μ—°μ‚°μžμ™€ ν•¨κ»˜ ν˜ΈμΆœν–ˆμ„ λ•Œμ™€ λ™μΌν•˜κ²Œ λ™μž‘ν•œλ‹€.

  • ν•˜μ§€λ§Œ String, Number, Boolean μƒμ„±μž ν•¨μˆ˜λŠ” new μ—°μ‚°μž 없이 ν˜ΈμΆœν•˜λ©΄ λ¬Έμžμ—΄, 숫자, λΆˆλ¦¬μ–Έ 값을 λ°˜ν™˜ν•œλ‹€. 이λ₯Ό 톡해 데이터 νƒ€μž…μ„ λ³€ν™˜ν•˜κΈ°λ„ ν•œλ‹€.

const str = String(123);
console.log(str, typeof str); // 123 string

const num = number('123');
console.log(num, typeof num); // 123 number

Ref

  • 이웅λͺ¨ μ €, ⌜λͺ¨λ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ Deep Dive⌟, μœ„ν‚€λΆ
profile
맀 μˆœκ°„ μ„±μž₯ν•˜λŠ” κ°œλ°œμžκ°€ 되렀고 λ…Έλ ₯ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

2개의 λŒ“κΈ€

comment-user-thumbnail
2022λ…„ 4μ›” 14일

μ΄λ²ˆκ³Όμ œμ—μ„œ μ‚¬μš©λ¬λ˜ new.target이 17μž₯에 λ‚˜μ™”μ—ˆκ΅°μš”

1개의 λ‹΅κΈ€