javascript - 了解原型(prototype)设计和增强

Question

我有一个fiddle帮助我理解 JavaScript 原型(prototype)和继承。评论讲述了故事。

//From Douglas Crockford's "Javascript: the good parts":  a helper to hide the "ugliness" of setting up a prototype
Function.prototype.method = function(name,func) {
    this.prototype[name] = func;
    return this;
}

function SomeFunc(value) {
    this.setValue(value);
}

//Inherit the function (to me this conceptually the same as adding a member to a class)
SomeFunc.method('setValue', function (value) {
    this.value = value;
    return this;
});

try
{
SomeFunc(1);
}
catch(e)
{
    alert(e);
}

为什么我会遇到异常？我的注释是否正确，JavaScript 所谓的继承对于经典程序员来说只是简单地向类添加新成员？增强和继承有什么区别？

Answer 1

Are my notes correct in that what JavaScript calls inheritance is to a Classical programmer simply adding a new member to a class?

不，不是真的。在 JavaScript 中，我们有基于原型(prototype)的继承。这意味着一个对象拥有对另一个特定对象(其原型(prototype))的引用。每当访问对象的属性时，都会在原型(prototype)链中搜索该属性。因此，如果对象本身没有此属性，则会检查其原型(prototype)是否有此属性，依此类推。

+------------+    +-------------+
|  Instance  |    |  Prototype  |
| __proto__ -+--->|  __proto__ -+-->...
| foo        |    |  bar        |
+------------+    +-------------+

Instance两者都有，foo和bar属性。

现在，如果您有构造函数，则可以创建引用同一原型(prototype)的许多实例(对象)。现在，当您向该原型(prototype)添加新属性时，所有实例也将具有此属性(由于原型(prototype)链)。

这通常是为了动态扩展实例，但这只是原型(prototype)继承的结果之一，它不是继承本身。

What is the difference between augmentation and inheritance?

继承就是将一个对象的原型(prototype)设置为某个对象，使其位于原型(prototype)链中。增强只是复制属性。该对象将拥有该属性:

+------------+
|  Instance  | 
| __proto__ -+--->...
| foo        |    
| bar        |
+------------+

Why do I get an exception?

因为你正在调用SomeFunc就像“普通”函数，而不是构造函数。在这种情况下，this将引用window ，其中没有 setValue方法。

相反，您想使用 new operator ^[MDN] 来调用它，创建一个新实例:

var instance = new SomeFunc(1);

如果这样调用，this将引用一个继承自构造函数的 prototype 的空对象属性(SomeFunc.prototype)。

MDN has a nice article about this and what it refers to in certain situations.

如果你看看 method正在做，您会看到它向 SomeFunc.prototype 添加了一个新属性( this 指 SomeFunc ):

this.prototype[name] = func;

事实上，你的代码的第一部分正在做的是我上面提到的:通过扩展 Function.prototype ，您向每个函数添加一个新属性，这可以让您调用 SomeFunc.methods稍后。

<小时/>

进一步阅读:

• MDN - Inheritance and the prototype chain
• MDN - Working with Objects
• MDN - this