2

Javascript次のようにコードに2つの関数を記述しました

Manager = FormManager.extend({
    First: function () {
     var response = this.Second("Feature"); //I'm able to get the alert

     //I have added a click event handler
     $('#element').on('click', function(){
       var newResponse = this.Second("Bug"); //The alert is not poping
     });

    }

    Second: function (type) {
     alert(type);
     //Performs certain operation
    }
});

エラー: Uncaught TypeError: オブジェクト # にはメソッド 'Second' がありません

thisのようなキーワードを使用せずに試しました

Second("Bug") // Error: There is no method

これは、私が遊んでいる私のプログラムの単純化された形式です（簡単な例を示すため）。原因が分からず困っています。

誰かが私を正しい道に導くことができますか?

4

2 に答える 2

6

間違った を使用していthisます。この方法を試してください。thisハンドラーの内部は#element、関数自体のコンテキストを表していません。

 var self = this; //cache the context here
 $('#element').on('click', function(){
   var newResponse = self.Second("Bug"); //Access it with self
 });

また、関数定義の後Firstと関数の前にカンマがないと思いますSecond。

フィドル

あなたが与えるコールバックが要素のコンテキスト内から呼び出される理由は、thisコンテキストが変化するためです。thiscontext は、コールバックが呼び出されたコンテキストを参照します。しかし、コールバックを jquery にバインドするときに$.proxyを使用する、EcmaScript5 Function.prototype.bindなどを使用するなど、これを回避する方法は他にもあります。ハンドラ内の要素の。

于 2013-09-20T20:31:50.960 に答える
2

関数でコンテキスト変数を使用するたびthisに、その値が何であるかを考慮する必要があります。

具体的には、 、 または、 またはを使用して、呼び出し元が指定した値になります。myObj.mymethod(...)mymethod.call(myObj, ...)mymethod.apply(myObj, [ ... ])

匿名関数$('#element').on('click', ...)が呼び出されると、jQuery はコンテキストを HTML DOM 要素に設定します - オブジェクトを参照しなくなります。

最も簡単な回避策thisは、コールバックの外側で のコピーを取得し、クロージャ内でそのコピーを参照することです。つまり、次のようになります。

var that = this;
$('#element').on('click', function() {
     // use that instead of this, here
     console.log(this);    // #element
     console.log(that);    // your object
});

別の方法は次を使用していFunction.prototype.bindます：

$('#element').on('click', (function() {
     console.log(this);    // your object
}).bind(this));

または、ES5関数であるため、 jQueryを使用$.proxyして同じ効果を得ることができます。.bind

イベントに関連付けられた要素var that = thisを参照する jQuery の規則を破らないため、私は実際にはこの方法を好みます。this

于 2013-09-20T20:37:10.740 に答える