crispynap/javascript-new.md

## javascript-new.md

      
    Raw
  

              javascript-new.md
            
          
    개요


10 JavaScript concepts you need to know for interviews의 6, 8번 질문에 대한 정보 정리

new - 객체 지향 프로그래밍과 어떻게 연관되어 있는지 숙지합니다. 함수가 new와 함께 호출될 때 어떤 일이 일어나는 지 알아야 합니다. new를 이용해 상속할 때 함수의 프로토타입 속성을 통해 객체가 생성되는 방식을 이해합니다.
Prototypes & Inheritance - 자바스크립트의 [[Prototype]] 속성을 통한 상속 체인을 이해합니다. 함수와 객체를 통해 상속을 설정하는 방법과 new 키워드가 그 과정을 어떻게 도와주는지 이해합니다. __proto __와 prototype 속성이 무엇이고 무슨 역할을 하는지 알아야 합니다.


new

new 개요


new 연산자는 객체를 만들고 초기화합니다. new 키워드 다음에는 반드시 함수 호출문이 와야하고 이때 호출되는 함수를 생성자라고 합니다.

Object, Array, Function 등이 자바스크립트 내장 생성자입니다.

new Object() === {}


new와 생성자를 사용하면 같은 프로퍼티를 가진 객체 인스턴스를 여러 개 만들 수 있습니다.
function Person (name) {
  this.name = name;
  this.sayName = function(){
    console.log(this.name);
  };
}; 
p1 = new Person("ram");
p2 = new Person("tim");


하지만 생성자만으로는 코드 중복까지 제거할 수는 없습니다. 객체 인스턴스를 100개 만들면 똑같은 함수가 100개 만들어지게 됩니다.


이보다는 모든 인스턴스가 한 메소드를 공유하도록 만드는 것이 효율적입니다. 이를 위해 등장한 것이 프로토타입입니다.


new의 내부 동작


new 키워드를 사용하면 자바스크립트 엔진에 의해 생성자 내부에 보이지 않는 코드가 만들어져 호출됩니다.

  function Person (name) {
    // this = {};
    // this.__proto__ = Person.prototype;

    // 함수가 object, array, function 중 하나를 반환하지 않는다면
    // this를 새로 만들어진 객체로 바인드하여 반환합니다.
    this.name = name;
    this.sayName = function(){
      console.log(this.name);
    };

    // return this;
  };

참고: new를 사용하지 않고 생성자 함수를 호출할 경우


this = {}라는 코드가 없으므로, this가 전역 객체를 가리키게 됩니다.
아래와 같이 방지할 수 있습니다.
function Person (name) {
  if(this instanceof Person === false) {
    return new User();
  }
  ...
}; 


Prototypes & Inheritance

prototype 개요


자바스크립트의 모든 객체는 프로토타입을 가집니다. 프로토타입은 객체를 위한 레시피로 생각할 수 있습니다.

  Person.prototype.sayname = function(){
    console.log(this.name);
  }


모든 인스턴스는 [[Prototype]]이라는 내부 프로퍼티를 통해 프로토타입의 변화를 추적합니다. [[Prototype]]은 인스턴스가 사용하고 있는 프로토타입 객체를 가리킵니다.
__proto __ 프로퍼티를 사용하여 내부 프로퍼티인 [[Prototype]]을 읽거나 쓸 수 있습니다. ES6에서 공식적으로 채택되었습니다.
new를 사용하면 생성자의 prototype 프로퍼티가 새로 생성된 객체의 [[Prototype]] 프로퍼티에 할당됩니다.
함수를 정의하면 함수만 생성되는 것이 아니라 Prototype Object도 같이 생성이 됩니다.

이미지 출처: Javascript 프로토타입 이해하기
생성된 함수는 prototype이라는 속성을 통해 Prototype Object에 접근할 수 있습니다. Prototype Object는 일반적인 객체와 같으며 기본적인 속성으로 constructor와 __proto __를 가지고 있습니다.
constructor는 Prototype Object와 같이 생성되었던 함수를 가리키고 있습니다.
__proto __는 Prototype Link입니다.


프로토타입 체인과 상속


상속은 어느 객체가 다른 객체의 속성과 메서드를 참조하는 것입니다. 이를 위해 프로토타입을 사용합니다.


새 객체의 [[Prototype]]으로 사용할 객체만 설정해주면 상속이 이루어집니다.

참고


MDN
Javascript’s “new” Keyword Explained as Simply as Possible
객체지향 자바스크립트의 원리(니콜라스 C. 자카스)
자바스크립트 완벽 가이드(데이비드 플래너건)
Javascript 프로토타입 이해하기