带有和不带有 new 运算符的 JavaScript 构造函数

Question

以下两段代码的工作有什么不同。两者似乎工作相似（我知道第一个是正确的，第二个不是，但有什么区别？）。

function Album(title, artist) {
    this.title = title;
    this.artist = artist;
    this.play = function() {
        console.log("Playing " + this.title + " - " + this.artist);
    };
}
var darkside = new Album("Dark Side of the Cheese", "Pink Mouse");
darkside.play();

同样的代码，但构造函数使用return this 并创建一个没有new 操作符的对象实例

function Album(title, artist) {
    this.title = title;
    this.artist = artist;
    this.play = function() {
        console.log("Playing " + this.title + " - " + this.artist);
    };
    return this;
}
var darkside = Album("Dark Side of the Cheese", "Pink Mouse");
darkside.play();

两者都返回相同的结果：

Playing Dark Side of the Cheese - Pink Mouse

Answer 1

这“有效”是因为没有new 的this 在浏览器上下文中解析为window，因此将window 对象的title 属性设置为title 参数。

您应该使用new，以便在正确的上下文中构造它并正确地创建一个具有自己属性的新对象。

function Album() { alert(this==window); }; x = Album(); // true 
function Album() { alert(this==window); }; x = new Album(); // false

因此，如果您创建另一个实例，this.title 将覆盖之前的实例，以此类推，您将没有任何独立对象来存储 title。