1

thisがオブジェクトを参照していないのはなぜmyObjectですか?

console.log(this)返品するときundefined...なぜですか？

Javascript:

var myObject = {
                    
    product: document.getElementById('product'),
    
    button: document.getElementById('btn'),
    
    productView: function(){
        if (this.product.className === 'grid') {
            this.product.className = 'list';
        } else {
            this.product.className = 'grid';
        }
    },
    
    clickHandler: function(e) {
        var o = this;
        console.log(this);
        o.productView();
        e.preventDefault();
    },
    
    init: function (){
        this.button.addEventListener('click', this.clickHandler, false);
    }
};

myObject.init();​

デモ

どうもありがとう

4

4 に答える 4

3

イベントの.thisハンドラー メソッドの は、クリックされているオブジェクトを参照します。var のようなものを使用してから、の代わりにself = myObject;使用します。selfthis

于 2012-06-30T20:56:03.473 に答える
2

thisオブジェクトの正しいコンテキストにバインドする必要があります。これを実現する一般的な方法は、ローカルの参照をthisinit 関数内の別の変数に割り当てることです。

init: function (){
    var that = this;
    this.button.addEventListener('click', function(e) {that.clickHandler(e)}, false);
}
于 2012-06-30T20:56:10.330 に答える
1

そこで呼び出すと、オブジェクトthis.clickHandler()が設定さthisれます。ただし、単に関数を に渡しているだけaddEventListenerであり、ブラウザーはthis関数を呼び出すときにカスタム値を設定します。

this現在の値をバインドする場合は、 を使用しますthis.clickHandler.bind(this)。によって返される関数bindも「間違った」値を受け取りますが、バインドされた正しい値thisで呼び出します。clickHandlerthis

于 2012-06-30T20:56:40.860 に答える
0

まず、クリックハンドラに「this」を使用してください...

clickHandler: function(e) {
    console.log(this);
    this.productView();
    e.preventDefault();
}

次に、いくつかのオプションがあります。ここに2つ...

オプション A:

init: function (){
    var o = this;
    this.button.addEventListener('click', function(e){
        o.clickHandler(e);
    }, false);
}

オプション B:

init: function (){
    this.button.addEventListener('click', this.clickHandler.bind(this), false);
}

これらのオプションのどちらが望ましいかについて、関連する質問をしました。

于 2014-09-19T17:09:19.603 に答える