new 키워드

만약 새로운 오브젝트를 new 키워드를 통해 생성하고자 할 때,

new라는 키워드 뒤에는 실제로 행해지고 있는 동작들이 있다.

 

function Person(name, age) {
    this.name = name
    this.age = age
}

const me = new Person('2DC', 24)

Person 펑션은 사실 특별한 것은 없다. 그냥 자바스크립트에서 쓰이는 펑션이다.

다만 new 키워드가 이 함수를 스페셜하게 만든다.

위의 함수를 new Person()의 형태로 실행시키게 되면,

자바스크립트는 새로운 오브젝트를 만들기 위해 동작하게 되며

me라는 변수에 오브젝트 프로토타입 상속(Prototype Inheritance)을 적용한다.

 

 

---

 

아래 코드는 위의 Person()이 new 키워드와 함께 동작했을 때를 나타낸 것이다.

(주석 바로 아래에 있는 코드줄은 동작은 하지만 보이지 않게 behind에서 실행된다고 볼 수 있다.)

function Person(name, age) {
    // new가 위의 Person 오브젝트와 함께 씌어졌을 때, 아래가 생략되어 동작한다.
    const this = Object.create(Person.prototype)
    
    this.name = name
    this.age = age
    
    // 이것도 생략되어서 동작한다.
    return this
}

위의 코드를 이용하면, new 키워드없이 단순히 person()을 출력하는 것 만으로도 새로운 오브젝트들을 찍어낼 수 있다.

1. Object.create(Person.prototype)을 this에 할당해줌으로써 Object 프로토타입이 Person에 옮겨진다.
2. 그것이 this에 할당되었다.
3. this에 키, 값 형식으로 데이터가 붙여지고,
4. 최종적으로 오브젝트가 리턴된다. 

---

크롬 콘솔에서 보는 new 키워드를 이용한 오브젝트 제작.

1. Object constructor로써 Person 펑션을 만듦.
2. myName이라는 펑션을 prototype 프로퍼티에 정의한다. (prototype은 이미 존재하는 프로퍼티임)
3. j 변수에 Person의 새로운 인스턴스를 할당한다.
4. j가 프로토타입 프로퍼티로 뭘 가지고 있는지 체크할 수 있다.

 

---

 

It's important to understand that there is a distinction between an object's prototype (available via Object.getPrototypeOf(obj), or via the deprecated proto property) and the prototype property on constructor functions.

 

The constructor function Foobar() has its own prototype, which can be found by calling Object.getPrototypeOf(Foobar). However this differs from its prototype property, Foobar.prototype, which is the blueprint for instances of this constructor function.

 

 

 

If we were to create a new instance — let fooInstance = new Foobar() — fooInstance would take its prototype from its constructor function's prototype property. Thus Object.getPrototypeOf(fooInstance) === Foobar.prototype.

 

---