new Keyword in JavaScript

■ 사용 경우

> Object constructor, Class 선언, 함수 새로 할당

 

 

■ 사용 이유

> literal 방식과 다르게, 유사한 객체를 여러번 재사용 해야할 때 유용한 방식

 

 

■ 사용 방식

> 생성자 방식의 new / this의 관계 추가 참조 : Link

> new 키워드 사용시 동작 순서

new 키워드 사용

1) 빈 객체를 생성하여 this에 할당( Object literal )

2) 함수 본문을 실행하고, 함수 내부 동작에 따라 this(함수 객체)에 프로퍼티를 추가해 this를 수정

    (this binding)

3) (1)에서 만들어진 객체에 _proto_라는 property를 추가. Constructor 함수의 prototype 객체를 의미.

4) this를 반환

    (때문에 new 키워드로 생성한 Object는 함수로부터 return된 것)

 

 

> 예시

(1) 선언부

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("Jack");

console.log(user.name); // Jack
console.log(user.isAdmin); // false
console.log("User.prototype : ",User.prototype);
console.log("user.__proto__ : ",user.__proto__);

> User.prototype 객체를 user가 상속받고 __proto__에 저장

> 즉 [새 객체] = new [전 객체] 일 때,

  [전 객체]의 prototype property를 [새 객체].__proto__로 access 할 수 있음을 의미

=== 현 객체의 method / propety는 [객체].property에서 찾아보고 없을 시, __proto__에서 상속받은 곳으로 찾아가서 찾을 수 있을 때 까지 반복해서 찾음

User.prototype === user.__proto__ 는 true

2) property 프로퍼티란?

> 생성자가 될 수 있는 객체를 new 키워드로 새 객체를 생성시,

   새 객체의 __proto__는 생성자 객체의 prototype 프로퍼티에서 가져오도록 되어있음( user이 User 상속받을 때 )

   이외의 상속관계는 prototype → prototype으로 가는듯( User이 Object를 상속받을 때 )

3) 생성자에 매써드 추가, 객체에서 접근 가능

※ 복사된 것은 아니고, link처럼 상위로 단계로 매써드를 검색해나갈 수 있는 것

// 생성자에 새 property method 추가
User.prototype.likesCake = true;
User.prototype.sayHi = function(){
    console.log(this.name + ' has Admin rights? : ' + this.isAdmin );
};


// 생성자 proptery에 추가된 매써드를 생성된 객체에서 접근 가능!
user.sayHi();
console.log('user like cake? : ', user.likesCake);

>>>
Jack has Admin rights? : false
user like cake? :  true

 

 

■ new 키워드의 동작

function User(name) {
  // this = {};  (빈 객체가 암시적으로 만들어짐)

  // 새로운 프로퍼티를 this에 추가함
  this.name = name;
  this.isAdmin = false;

  // return this;  (this가 암시적으로 반환됨)
}

 

> 예시 2

- 익명함수로 감싸, 복잡한 과정을 거쳐야 하는 객체 생성 후 return

let user = new function() {
  this.name = "John";
  this.isAdmin = false;

  // 사용자 객체를 만들기 위한 여러 코드.
  // 지역 변수, 복잡한 로직, 구문 등의
  // 다양한 코드가 여기에 들어갑니다.
};

---

참조 :

ko.javascript.info/constructor-new

'new' 연산자와 생성자 함수

3jun.tistory.com/86

초보자를 위한 Javascript: 'new' 예약어

developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes

Object prototypes - Web 개발 학습하기 | MDN