자바스크립트

JS 생성자 함수, 프로토타입 체인

KairoYang 2020. 6. 8. 21:20

생성자 함수(The Constructor Fucntion)

생성자함수란 new와 함께 쓰이는 함수. 직접 함수를 정의하여 new키워드로 생성자 함수를 만들어 사용할 수도 있지만, js에 기본적으로 내장된 생성자 함수를 사용 할 수도 있다.

ex) new Array();  new Object(), new Function()

-이름은 대문자로 시작.

var arr =[] 과 var arr = new Array() 같다.

자바스크립트에서 모든 함수는 객체이다.

생성자 함수에는 기본적으로 prototype이란 속성이 자동으로 생긴다. 

Object.prototype의 값으로는 리턴된객체에 constructor 라는 속성이 있다.

-construcotr와 prototype은 한 쌍을 이루고 있고 서로가 서로의 정보를 가지고 있다.

 

생성자 함수의 인스턴스(instance)

var obj = new Object();

-모든 생성자 함수는 this라는 빈 객체를 리턴한다.

obj 변수에는  빈 객체가 할당된다.

이 때 생성자 함수에서 리턴하는 결과물을 우리는 인스턴스라고 한다.

인스턴스는 constructor와 prototype 사이에서 생성된 자식과 같다.

 

프로토타입 체인(Prototype chain)

인스턴스는 부모의 prototype에 접근할 수 있다는 특징이 있다.

var obj = new Object();

console.log(obj.constructor); Object() 출력.

constructor의 값을 가져올 수 있는데 그 이유는 obj의 엄마인 Object.prototype이 constructor의 정보를 가지고 있어서. 

-상속이라고 일반적으로 얘기한다. 인스턴스가 부모 프로토타입에 접근하여 정보를 가져다 쓸 수 있다는 특성을 부모의 정보가 상속된다고 표현한다. 엄밀히 말하면 상속보다는 위임이다. 인스턴스는 상위 프로토타입에 접근하여 잠시 부모 프로토타입의 정보를 빼오거나 메소드를 위임받아 사용 할 수 있는 것이다.

var arr = new Array();

arr.push(3);  arr이라는 인스턴스를 만들었다. arr에 3이란 숫자를 넣을때 push 메소드를 사용 할 수 있는 이유는 arr의 상위 프로토타입인 Array.prototype이 push 메소드를 가지고 있기때문.

 

Dunder Proto(__proto__)

-상위 프로토타입을 가져올때 사용한다.

var ken = new Person('ken huh');

console.log(ken.constructor === Person);  t

console.log(ken.__proto__ === Person.prototype);  t

ken이란 인스턴스는 부모 프로토타입에 접근하여 constructor 정보를 가져올 수 있다.

ken.__proto__ 라고 적으면 Perosn.prototype과 동일하다.