javascript - 这两种对象构造方法有什么区别呢？

Question

写一些代码，我想做这样的事情:

var text = Text('hello').trim().bold();

所以，我做了以下事情。

function Text(text) {
    this.value = text;

    this.trim = function() { /* trim code */ return Text(this.value); }
    this.bold = function() { /* bold code */ return Text(this.value); }

    return this;
}

这和下面的有什么不同吗？

function Text(text) {
    this.value = text;

    this.trim = function() { /* trim code */ return new Text(this.value); }
    this.bold = function() { /* bold code */ return new Text(this.value); }
}

并使用以下调用它？

var text = new Text('hello').trim().bold();

或者它们实际上等价吗？

Answer 1

这里的基本要点是，对于Text 的给定实现，此行任一个都是错误的:

var text = Text('hello').trim().bold();

...因为在 Text 中，您将属性存储在 this 上，但是当您按照上面的方式调用 Text 时，this 是全局对象(松散模式)或 undefined(严格模式)。在宽松模式下，您正在创建/覆盖名为 value、trim 和 bold 的 globals(因为您重新向全局对象写入属性，全局对象的所有属性都是全局的)；在严格模式下，您会得到一个异常，因为您不能将属性分配给 undefined。

相反，您必须这样调用它:

var text = new Text('hello').trim().bold();
// Note ---^^^

这应该可以回答您关于 trim 和 bold 的问题(例如，您需要第二个版本，即使用 new 的版本)。另外，如果使用 new 调用函数，则末尾的 return this; 是不必要的。

如果你想在不使用 new 的情况下调用 Text，你可以，但是实现必须不同——它必须创建它返回的对象，因为 >new 并没有这样做:

function makeText(text) {
    var obj = {};

    obj.value = text;

    obj.trim = function() { /* trim code */ return makeText(this.value); };
    obj.bold = function() { /* bold code */ return makeText(this.value); };

    return obj;
}

或更简洁:

function makeText(text) {
    return {
        value: text,
        trim: function() { /* trim code */ return makeText(this.value); },
        bold: function() { /* bold code */ return makeText(this.value); }
    };
}

请注意，我更改了名称，因此它不再以大写字母开头；在 JavaScript 中，压倒性的约定是以大写字母开头的函数是构造函数(在正常情况下，您通过 new 调用的函数)。