[33-js-concepts] 16. new, 생성자, instanced, 인스턴스 (new, Constructor, instanced and Instances)

new 연산자 ?

동작원리

1.  새로운 빈 객체 생성
2.  this 를 새로 만들어진 객체에 바인딩한다.
3. 새로 만들어진 객체에 __proto__ 라 불리는 property 를 더한다.(이것은 contructor 함수의 prototype 객체를의미한다.)
4. 생성된 객체가 반환된다.

 

 

1. first 라는 새로운 객체 생성
2. this 는 first object 에 바인딩 되므로 this에 대한 모든 참조는 first 를 가리킨다.
3. __proto__ 가 추가
4. first.__proto__ 는 Student.prototype 을 가리킨다. 

 

 

 

생성자 ?

객체를 만드는 역할을 하는 함수

자바스크립트의 생성자 함수는 new 와 함께 사용 할수도, 일반적인 함수처럼 사용될 수 도 있다.

 

Prototype ? 

자바스크립트의 모든 객체들은 prototype을 가지고 있다.

자신이 다른 객체의 원형이 되는 객체를 말한다.

프로토타입 객체에 멤버를 추가할 수 있다.

 

 

동일한 생성자 함수로 생성된 객체들은 내부적으로 __proto__ 프로퍼티를 사용하여 생성자 함수에 존재하는 Prototype 이라는 프로퍼티를 참조하여 같은 공간을 공유한다.

 

1. Person 이란 생성자 함수 선언
2. new Person 으로 다중 객체 생성

 

파싱단계에서 Person 함수의 prototype 속성은 프로토타입 객체를 참조한다.

프로토타입 객체 멤버인 constructor 속성은 Person 함수를 참조하는 구조를 가진다.

 

이후 new 연산자로 객체 생성시

생성된 객체에는 __proto__ 속성이 추가되고, Person 함수의 프로토타입 객체를 참조한다.

 

 

인스턴스

생성자 함수를 사용하기 위한 수단이다.

생성자 함수의 구조로 컴퓨터 메모리에 실제로 저장되는 실체이다.

아래와 같이 new 키워드로 생성한 객체를 인스턴스 라고 부른다.

 

객체를 인스턴스로 생성시 constructor 라는 프로퍼티가 자동으로 추가된다.

 

instanceof

연산자로서 생성된 인스턴스 객체가 어떤 생성자 함수를 사용하여 생성 되었는지 확인하고 불린값으로 반환하여 준다.

동작과정

1. 인스턴스가 가지고 있는 __proto__ 정보를 가지고온다.
2. 객체가 가진 __proto__ 와 함수의 prototype을 비교한다.
3. 동일한 값을 찾기위해 체인 영역의 전체를 2번 과정으로 반복한다.

 

주의할 점

자바스크립트의 모든 객체는 Object() 생성자를 상속하기 때문에 Object 와 연산시 무조건 true를 반환

console.log(instanceOfObj instanceof Object);	// true

 

원시값과 원시값에 해당하는 객체 래퍼의 인스턴스인지 확인하는 경우 항상 false를 반환

console.log("String" instanceof String);	// false

 

래퍼객체 생성 후 비교 시 true 반환

const str = new String("String);
console.log(str instanceof String);	// true

 

따라서, 객체를 반환하는 생성자 함수를 통해 만든 객체 또는 인스턴스에만 해당 연산자를 사용해야한다.

cmj