2

所以我看到了这篇文章，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);
4

3 回答 3

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
};
于 2013-07-25T19:42:15.013 回答
3

包装您对new调用new您的内部函数的所有使用。这样一来，您的 API 用户就不需要使用了new——他们只需调用返回new操作结果的函数：

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

也就是说，我个人认为new在设计 API 时要求使用 并不是什么大问题。

也就是说，您有时可能出于其他原因想要避免new使用并Object.create改用。

于 2013-07-25T19:42:41.100 回答
0

完全没有的解决方案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 = { .... }

于 2013-07-25T19:46:28.747 回答