JavaScript 面向对象 : Object instantiation and adding properties using different syntaxes

Question

我正在尝试更深入地研究 JavaScript OOP 实践。总的来说，我明白了，但仍然存在一些问题，尤其是关于对象实例化和添加方法的问题。

在创建构造函数时，我过去使用过这两个版本:

function MyConstructor(someArg) {
    this.arg = someArg;
}

var MyConstructor = function(someArg) {
    this.arg = someArg;
}

两者都可以用同样的方式初始化，但它们是一样的吗？我问是因为在其中一个中，对象的名称是函数的名称，而在另一个中，实际对象是在匿名函数中创建的。

在向对象添加方法时，我遇到了几种变体，这让我很困惑，因为我真的不明白这只是语法不同，还是它们的工作方式不同。

这向 MyConstructor 的原型(prototype)添加了一个函数，这意味着所有实例都可以访问它，也包括扩展 MyConstructor 的对象，因为它在原型(prototype)链中。

MyConstructor.prototype.showArg = function() {
    console.log(this.arg);
}

有时候我也会看到这样的事情:

MyConstructor.prototype = {
    showArgument:function() {
        console.log(this.arg);
    },
};

这是否与第一个示例 (MyConstructor.prototype.showArg = function()...) 相同？

然后我也遇到了这样的语法，这对我不起作用 – 是因为 showArg 只添加到一个特定的实例，而不是原型(prototype)吗？

MyConstructor.showArg = function() {
    console.log(this.arg);
}

此外，似乎还有一种 jQuery 方法可以做到这一点:

$.extend(MyConstructor.prototype, {
    showArgument:function() {
        console.log(this.arg);
    },
});

这可能与前两个示例相同，因为它向原型(prototype)添加了属性，是吗？

Answer 1

MyConstructor.prototype 引用对象。当你分配它时

MyConstructor.prototype = {
    showArgument:function() {
        console.log(this.arg);
    },
};

它实际上是在创建一个新对象，并将 showArgument 作为一个属性。通过原型(prototype)继承的所有其他默认属性都将丢失。但是当你这样做的时候

MyConstructor.prototype.showArg = function() {
    console.log(this.arg);
}

这扩展了现有对象以具有附加属性 showArg 保持其他属性不变。

JQuery 的 extend() API 提供了一种扩展对象并向其添加属性的方法。它更像是一种 JQuery 做事方式。