객체를 생성하는 여러 방법 중에 객체 리터럴 사용하면 직관적이고 사용하기에 간편하지만
단 하나의 객체 생성만 가능하다는 단점이 있기에 ( 동일한 프로퍼티를 사용하는 여러 객체를 만들 경우 비효율적이다. )
생성자 함수를 통해서 이러한 단점을 극복할 수 있다.
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 |