JavaScript OOP：对象实例化和使用不同语法添加属性答案

【问题标题】：JavaScript OOP: Object instantiation and adding properties using different syntaxesJavaScript OOP：对象实例化和使用不同语法添加属性
【发布时间】：2015-10-14 21:09:23
【问题描述】：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

这大概和前两个例子一样，因为它给原型增加了属性，对吧？

【问题讨论】：

首先，Object.prototype 是一个对象。当您执行Object.prototype.property = ... 时，您正在更改一个属性，但是当您执行Object.prototype = {...} 时，您正在设置整个值。其次，function expression vs declaration in JavaScript

标签： javascript jquery oop

【解决方案1】：

MyConstructor.prototype 指的是对象。当你像这样分配它时

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

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

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

这扩展了现有对象，使其具有额外的属性 showArg 保持其他属性不变。

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

【讨论】：

我从来没有意识到在第一个例子中默认原型丢失了——我怎么能错过呢！但只是为了澄清：在你的第一个例子中，那将是Object.prototype，但在我的第一个例子中它会是什么？ Function.prototype?
是的。任何对象从 Object.prototype 创建继承，而函数从 Function.prototype 创建。

【解决方案2】：

原型示例绝对不是相同的东西；在第二个示例中，您完全删除原型中的所有内容除了showArgument 函数。

仅设置 showArg

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

将原型设置为only showArgument

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

【讨论】：