1

2 つのプロパティを持つ基本的な JavaScript クラスがあります。クリックイベントの値をログに記録したい。これが私が得たものです：

function Clicker(/*string*/var1, /*id*/var2) {
    this.name = var1;
    this.clickerid = var2;
    this.clickevent = function() {
        console.log("1: " + this.name);
        console.log("2: " + this);
        console.log("3: " + window.testClicker.name);
    };

    var element = document.getElementById(this.clickerid);
    element.addEventListener("click", this.clickevent, false);
}

window.onload = function() {
    window.testClicker = new Clicker("lorem ipsum", "checkbox1");
};

<input id="checkbox1" type="checkbox" value="1" checked>

テストを実行すると、ログに次のように表示されます。

1: undefined
2: <input id=​"checkbox1" type=​"checkbox" value=​"1" checked>​
3: lorem ipsum

1行目と3行目が一致することを期待していました。提案？

4

3 に答える 3

3

の値はthis、関数が呼び出されるコンテキストによって異なります。

イベントリスナーが起動すると、関数は、関数のコピー元のオブジェクトではなく、イベントが関連付けられている要素のコンテキストで呼び出されます。

コンテキストをオーバーライドするために使用bindします (定義したコンテキストで元の関数を呼び出す新しい関数を生成します)。

element.addEventListener("click", this.clickevent.bind(this), false);

これは次と同等です。

element.addEventListener(
    "click", 
    function (context) {
        return function () {
            context.clickevent();
        };
    }(this),
    false
);
于 2013-09-16T20:46:04.310 に答える
2

コンテキストの問題である可能性があると思いますが、次のように機能する可能性があります。

function Clicker(/*string*/var1, /*id*/var2) {
    this.name = var1;
    this.clickerid = var2;
    var self = this;
    this.clickevent = function() {
        console.log("1: " + self.name);
        console.log("2: " + this);
        console.log("3: " + window.testClicker.name);
    };

    var element = document.getElementById(this.clickerid);
    element.addEventListener("click", this.clickevent, false);
}

console.log2番目でわかるように、オブジェクトthisではなくチェックボックスを参照しますCliker

于 2013-09-16T20:44:08.587 に答える
0

完全を期すために、次の 3 つの解決策が考えられます。

  1. dm03514's answerで提案されているように、閉鎖変数を使用します。
  2. Quentin's answerbindで提案されているように使用します。
  3. イベント リスナー インターフェースを使用する /イベント リスナーによって呼び出される 'this' キーワードを含むオブジェクト メソッドのスコープの処理でhandleEvent提案されているように。
于 2013-09-16T20:48:14.583 に答える