JS API에서`new` 연산자를 사용하지 않는 방법은 무엇입니까?

Question

this article Baranovskiy 씨는 기본적으로 사람들이 API를 사용하기 위해 new 연산자를 사용할 필요가 없다고 말했습니다. 난 당신이 코드 라인 colorBox의 인스턴스를 만들 수 있습니다 this basic example을 만든

어떻게이 new 연산자를 사용하지 않고 예에서 무엇을 구현할 수 var box = new colorBox(node, options);?

JS : - 나는 new 쓰기 코드를 완벽하게 합리적인 방법이라고 생각하고 "는의 인스턴스를 만들 분명히 있다고한다

var colorBox = function(node, options) { 
    this.setSize = function(){ 
     node.style.width = options.width + 'px'; 
     node.style.height = options.height + 'px'; 
    } 
    this.setColor = function(color){ 
     node.style.backgroundColor = color || options.color; 
    } 
    this.setSize(); 
    this.setColor(); 

} 

var node = document.getElementById('thing1'); 
var options = { 
    color: 'red', 
    width: 200, 
    height: 200 
} 

var box = new colorBox(node, options); 

setTimeout(function(){ 
    box.setColor('blue'); 
}, 2000); 

Answer 1

첫째, 기사에 동의하지 않는 클래스 ", 모든 객체 지향 언어처럼.

하지만 ...

this이의 인스턴스가 아닌 경우 발신자가 (new을 떠나면 새로운 인스턴스를 반환하는 기능을 가지고하는 방법을 보여줍니다 this answer의 두 번째 접근 방식을 살펴보십시오 "class"이면 발신자가 new으로 끝났고 this이 아마도 글로벌 창일 것입니다. 이는 사용자가 new을 입력 할 필요가없는 한 가지 방법으로 매번 새로운 인스턴스를 안전하게 반환하는 것입니다.

var colorBox = function(node, options) { 
    if (!(this instanceof colorBox)) 
     return new colorBox(node, options); 

    // do the rest of your constructor stuff 
}; 

Answer 2

new의 용도를 모두 new이라고하는 함수 내에 포함 시키십시오. 그 방법은, 당신의 API의 사용자가 결코 new를 사용할 필요가 없다 - 그들은 단지 new 작업의 결과를 반환하는 함수를 호출했다

function makeColorBox(node, options) { 
    return new colorBox(node, options); 
} 

을, 나는 개인적으로 new의 사용을 필요로 생각하지 않는다 API를 디자인 할 때 정말 큰 문제입니다.

에 따르면 sometimes might want to avoid new for other reasons이며 대신 Object.create을 사용합니다.

완전히 new없는 솔루션은 다음과 같을 것이다

Answer 3

: 여기

function colorBox(node, options) { 
    var box = { 
     setSize: function(){ 
      node.style.width = options.width + 'px'; 
      node.style.height = options.height + 'px'; 
     }, 
     setColor: function(color){ 
      node.style.backgroundColor = color || options.color; 
     } 
    }; 
    box.setSize(); 
    box.setColor(); 
    return box; 
} 

중괄호 box = { .... }