如何正确扩展JS对象？

Question

假设我在一个名为的文件中有这样的东西main.js:

function obj_name() {}

obj_name.prototype = {
    foo  : function() { alert('hi!'); },
    foo2 : function() { alert('hi again!'); }
}

现在我正在尝试这种方式来扩展另一个文件中的对象extend.js:

obj_name.prototype = {
    newfoo : function() { alert('hi #3'); }
}

...但问题是如果我以这种方式编码它将会起作用:

obj_name.prototype.newfoo = function() { alert('hi #3'); }

我想这可能是一个菜鸟问题.我甚至不知道这是否是扩展对象的正确方法,但我在这里吓到了,想知道为什么会这样.

提前谢谢你们.

Answer 1

没有jQuery的另一个选择:

var extend = function(destination, source)
{
    for (var property in source)
    {
        if (destination[property] && (typeof(destination[property]) == 'object')
                && (destination[property].toString() == '[object Object]') && source[property])
            extend(destination[property], source[property]);
        else
            destination[property] = source[property];
    }
    return destination;
}

var a = {a: 'test'};                              // original
var b = {newFoo: function() { alert('hi #3'); }}; // the addition
extend(a, b);                                 // extend it
a.newFoo();                                   // call the added property

Answer 2

这是因为在行上

obj_name.prototype = {
    newfoo : function() { alert('hi #3'); }
}

您创建一个新的原型对象,删除相关的内容.就像你说的那样

var a = {};

当你扩展对象时

obj_name.prototype.newfoo = function() { alert('hi #3'); }

它只是向对象树添加一个新属性(newfoo),保持现有内容不变.这就是它起作用的原因

HTH

伊沃·斯托伊科夫

Answer 3

第一种方式是用新原型替换原型（覆盖之前的原型）。在第二种方式中，您向原型添加一个新成员（从而扩展它）。

还有另一种方法：一个具有extend方法或类似方法的库（它基本上将您在第二种形式中所做的事情包装在一个漂亮的包装器中）。例如，在jQuery中：

$.extend(obj_name.prototype, {
    newfoo : function() { alert('hi #3'); }
}