Question

所以我遇到了this article，Baranovskiy先生基本上说人们不应该使用new运营商来使用你的api。我创建了this basic example，您可以使用此行代码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);

Answer 1

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

但是...

查看this answer上的第二种方法，其中显示了如果调用者离开new（如果this不是“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);
}

那就是说，我个人认为在设计API时要求使用new并不是一件大事。

表示，您sometimes might want to avoid new for other reasons并改为使用Object.create。

Answer 3

完全没有new的解决方案如下所示：

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 = { .... }

创建要返回的对象

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

3 个答案: