javascript - 在 jQuery 中克隆和扩展对象？

Question

好的，下面是我想做的基本操作:

var Hi = function(name){
    this.name = name;
};

Hi.prototype = {
    message: function(){
        $('body').append('Hi '+this.name);
    }
};

var hi = new Hi('There ');

效果很好，但现在我想复制它，这样我就可以将它更改为说“再见”，

var Bye = Hi;
Bye.prototype.message = function(){
    $('body').append('Bye '+this.name);
};

var bye = new Bye('There');

那么为了获得 Hi There Bye There 的输出，我认为这应该可行:

hi.message();
bye.message();

但输出是 Bye There Bye There 也就是我的修改覆盖了原始对象。

我怎样才能让它像我期望的那样工作？请注意，jQuery/jQuery UI 解决方案很好，但我想要 vanilla 和 jQuery 版本来了解发生了什么!

我的代码的 jsFiddle:http://jsfiddle.net/YGa7p/

Answer 1

线

var Bye = Hi;

只是引用您的原始功能，它不会复制。通常你会这样做

var Hi = function(name){
    this.name = name;
};

Hi.prototype.message = function() {
    $('body').append('Hi '+this.name);
};

var Bye = function(name){
    Hi.call(this, name); // re-call base constructor
};

Bye.prototype = new Hi(); // create base object

// overwrite Hi's message
Bye.prototype.message = function() {
    $('body').append('Bye '+this.name);
};

var hi = new Hi("there");
var bye = new Bye("there");

// See also instanceof:

// hi instanceof Hi      // true
// hi instanceof Object  // true

// bye instanceof Bye    // true
// bye instanceof Hi     // true
// bye instanceof Object // true

http://jsfiddle.net/YGa7p/1/ .

在 javaScript 中很难做 OOP。要创建派生对象，您将在使用“简单”方法时遇到麻烦，至少在 Level 3...n 继承中是这样。请阅读我在 V javaScript class functions 上的文章，如果您对 javaScript 中的扩展继承感兴趣。