1

さて、これが私がやりたいことの基本です：

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ソリューションは問題ありませんが、バニラバージョンとjQueryバージョンの両方に何が起こっているのかを理解してもらいたいことに注意してください。

私のコードのjsFiddle：http: //jsfiddle.net/YGa7p/

4

2 に答える 2

2

この線

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 を行うのは困難です。派生オブジェクトを作成するには、少なくともレベル 3...n の継承では、「単純な」メソッドを使用すると問題が発生します。JavaScriptの拡張継承に興味がある場合は、V javaScript クラス関数に関する私の記事を読んでください。

于 2012-11-04T14:47:15.230 に答える
1

プロトタイプの新しいオブジェクトをインスタンス化します。問題を解決します。Bye.prototype=new Hi(); のように

    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=new Hi();
Bye.prototype.message = function() {
    $('body').append('Bye ' + this.name);
};

var bye = new Bye('There');

hi.message();
bye.message();​
于 2012-11-04T15:21:34.427 に答える