4

次の単純な JavaScript「クラス」があります。

function Person(params) 
{
    this.name = params.name;
}
Person.prototype.SayHi = function()
{
    alert(this.name + " says hi");
}

これは、その場で実行すると期待どおりに機能します。次のコードを実行すると、「アリスがこんにちは」というポップアップが表示されます。

var alice = new Person({name:"Alice"});
alice.SayHi();

しかし、ボタンイベントに割り当てようとすると、うまくいきません:

$("#AliceOnClick").on("click", alice.SayHi);
$("#BobOnClick").on("click", bob.SayHi);

SayHi関数が呼び出されたように見えますが、nameフィールドは null です。

最小限の実例:

http://jsfiddle.net/AKHsc/1/

私は何を間違っていますか？

4

3 に答える 3

1

したがって、 を介して呼び出さずに関数を呼び出すinstanceと、javascript はinstance objectと関数の間のリンクを維持せず、インスタンス オブジェクトを関数に渡すだけです。

function Person(params) 
{
    this.name = params.name;
}
// version 1
Person.prototype.SayHi = function(who)
{
    return function() {
        alert(who.name + " says hi");
    }
}
// version 2, with `bind` method supported
Person.prototype.SayHi = function () {
    return function () {
        alert(this.name + " says hi");
    }.bind(this);
}
// version 3
Person.prototype.SayHi = function () {
    var who = this;
    return function () {
        alert(who.name + " says hi");
    }
}

alice = new Person({
    name: "Alice"
});
bob = new Person({
    name: "Bob"
});

$(function(){
    $("#AliceOnClick").on("click", alice.SayHi()));
    $("#BobOnClick").on("click", bob.SayHi());
    // $("#AliceOnClick").on("click", alice.SayHi(alice));
    //$("#BobOnClick").on("click", bob.SayHi(bob));
});
于 2013-08-01T17:39:24.167 に答える