본문 바로가기

자바스크립트

생성자 함수의 객체 생성

객체를 생성하는 여러 방법 중에 객체 리터럴 사용하면 직관적이고 사용하기에 간편하지만 

단 하나의 객체 생성만 가능하다는 단점이 있기에 ( 동일한 프로퍼티를 사용하는 여러 객체를 만들 경우 비효율적이다. )

생성자 함수를 통해서 이러한 단점을 극복할 수 있다.

 

new 연산자와 생성자 함수를 호출하면 자바스크립트 엔진은 암묵적으로 빈 객체를 생성하고 이렇게 생성된 객체를

인스턴스라고 한다.

function Circle(radius) {
  this.radius = radius;
  this.getDiameter = function() {
    return 2*this.radius;
  };
}

const circle1 = new Circle(5);
const circle2 = new Circle(10);

console.log(circle1.getDiameter());
console.log(circle2.getDiameter());

this 바인딩(식별자와 값을 연결하는 과정)은 함수 호출 방식에 따라 동적으로 결정된다.

일반함수로서 호출 메소드로서 호출 생성자함수로서 호출
브라우저 환경에서는 전역객체, Node.js환경에서는 global을 가르킨다. 마침표 앞의 객체를 가르킨다. 미래에 생성 할 인스턴스를 가르킨다.
function Circle(radius) {
  if (!new.target) { //ES6에서 지원한다. 단 IE에서는 지원이 안된다.
    return new Circle(radius);
  }
  this.radius = radius;
  this.getDiameter = function () {
    return 2*this.radius;
  };
}

new 연산자를 사용하지 않고 생성자 함수로써 호출할 수 있는 방법을 위 코드로 확인 할 수 있다.

IE에서는 지원하지 않기에 scope-safe constructor pattern을 사용할 수 있다.

if절 조건에 !(this.instanceof Circle) 으로 사용하면 된다. 

객체의 프로토타입 체인 상에 존재하면 true로 평가되고, 그렇지 않으면 false로 평가된다.

 

'자바스크립트' 카테고리의 다른 글

script 태그의 async와 defer 속성  (0) 2021.08.26
Javascript’s __proto__ vs prototype  (0) 2021.06.28
함수 객체의 프로퍼티  (0) 2021.06.08
Unexpected comma using map()  (0) 2021.05.22
Currying  (0) 2021.04.06