如何在JS API中不使用`new`运算符?

she*_*ock 2 javascript

所以我遇到了这篇文章,Baranovskiy先生基本上说人们不应该使用new运算符来使用你的API.我创建了这个基本示例,它允许您colorBox使用此行代码创建实例var box = new colorBox(node, options);

如何在不使用new运算符的情况下实现示例中的内容?

JS:

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);
Run Code Online (Sandbox Code Playgroud)

Joe*_*nos 5

首先,我不同意这篇文章 - 我认为这new是一种完全合理的编写代码的方式,并且清楚地表明你正在创建一个"类"的实例,就像任何面向对象的语言一样.

但...

看一下这个答案的第二种方法,它显示了如果一个函数将返回一个新实例,如果调用者离开new(如果this不是"类"的实例,那么调用者离开new,并且this可能全球窗口).这是一种不要求用户键入的方法new,同时每次都安全地返回一个新实例.

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

    // do the rest of your constructor stuff
};
Run Code Online (Sandbox Code Playgroud)