혼자서 정리하는 자바스크립트 이론
1.생성자(new 키워드)
다른 언어들은 클래스를 이용해 프로퍼티가 똑같은 객체를 만들 수 있습니다. 하지만 자바스크립트에는 클래스가 없습니다. 그 대신에 new 연산자를 통해서 객체를 생성합니다.
사람을 표현할 수 있는 객체 Person을 생성하였습니다. 그리고 new 연산자를 사용해서 새로운 객체를 만들었습니다. name = ‘young’, job = ‘ developer’의 프로퍼티가 저장된 객체가 생성되었고 person 변수에 할당하였습니다.
new 연산자를 이용해서 새로운 객체를 생성하는 함수를 생성자 함수라고 부릅니다. 관례적으로 이러한 생성자 함수는 첫 글자를 대문자로 쓰는 파스칼 표기법을 따릅니다.
생성자 함수와 new 연산자로 만들어진 (위 코드의 person 변수) 객체를 인스턴스라고 합니다. 다른 언어들은 클래스를 기반으로 인스턴스를 생성하지만 자바스크립트에는 클래스가 없습니다. 생성자 함수라는 함수 객체가 실체이기 때문에 약간은 다릅니다. 하지만 구현하는 기능이 비슷하기 때문에 자바스크립트에선 인스턴스라고 부르는 것이 관례입니다.
생성자 함수를 사용하면 이름은 같지만 다른 속성을 가진 다른 객체(인스턴스)를 만들 수 있습니다.
2.프로토타입 체인
__proto__ (Dunder Proto)를 이용하면 상위 프로토타입에 접근할 수 있습니다. 하지만 __proto__ (Dunder Proto)는 모든 자바스크립트 환경에서 적용되는 것이 아님으로 조심해야 합니다.
함수를 정의하게 되면 모든 객체는 기본적으로 prototype 프로퍼티를 갖고 있습니다. 그리고 prototype 프로퍼티는 프로토타입 객체를 가리키며, 그 객체는 constructor 프로퍼티와 __proto__을 가지고 있습니다.
생성자와 생성자의 prototype 객체는 서로를 참조합니다. 생성자의 prototype 프로퍼티가 프로토타입 객체를 가리키고 prototype 객체는 constructor 프로퍼티를 가지고 있는데 이 프로퍼티는 생성자(constructor 객체)를 가리키며 순환 구조로 연결되어 있습니다.
위 코드가 실행되는 과정을 통해 프로토 타입 체인을 설명해보겠습니다.
objSon.sayHello()가 실행되면 objSon은 내부에 sayHello라는 프로퍼티가 있는지 확인합니다. 하지만 위에 코드에서는 sayHello가 없습니다.- 그 다음에는
objSon.__proto__가 가리키는 objPapa가 sayHello를 가지고 있는지 확인합니다. objPapa 또한 가지고 있지 않습니다. objPapa.__proto__가 가리키는 objGrandPapa가 sayHello를 가지고 있는지 확인합니다. objGrandPapa는 sayHello를 가지고 있습니다. 이제 sayHello를 사용합니다.- objSon의 name 프로퍼티를 찾습니다. objSon은 name 프로퍼티가 없습니다.
objSon.__proto__가 가리키는 objPapa가 name 프로퍼티가 있는지 확인합니다. objPapa는 ‘jae’라는 name 값이 있습니다. 이 값을 this.name으로 사용합니다.
이렇게 자신이 프로퍼티를 갖고 있지 않을 때 __proto__ 프로퍼티를 이용해 타고 올라가서 프로퍼티를 검색하는 것을 프로토타입 체인 이라고 합니다. 다른언어처럼 상속의 개념이 아니라 객체가 가지고 있지 않은 프로퍼티와 메서드를 위임(delegate)하는 개념입니다. 체인을 통해서 다른 언어들이 클래스를 이용해 상속하는 것처럼 자바스크립트는 프로퍼티와 메서드를 전파합니다.
