0

これは私のJavaScriptコードです。その目標は教育のみです。私はjsOOPとjqueryを勉強しています

function App() {

this.deviceReadyDeferred = new $.Deferred();

this.init = function() {
    console.log ("Run");
    $.when(this.deviceReadyDeferred).then(this.run);
    document.addEventListener("click", this.onDeviceReady, false);

},

// NB: onDeviceReady non ha parametri evento
this.onDeviceReady = function() {
    console.log("deviceReady");
    this.deviceReadyDeferred.resolve();
},

this.run = function() {
    console.log("main");
}

}

app = new App();
app.init();

クリックすると、

TypeError：this.deviceReadyDeferredは未定義です

なんで？

  • '$'が未定義であるため、jQueryは正常に実行されています。
  • Win7のFF19.0.2でjQuery1.9.1を実行しています

javascriptオブジェクトにdeferedを使用するにはどうすればよいですか？それを初期化して再利用する方法は？

編集：

このコードは機能しています。すべての問題は私の誤用にありthisました。私はJavaScriptを使ったOOPの初心者です。

function App() {

    var self = this;

    this.deviceReadyDeferred = new $.Deferred();

    this.init = function() {
        console.log ("Run");
        $.when(self.deviceReadyDeferred).then(self.run);
        $(document).on("click", self.onClick);

    },

    this.onClick = function() {
        console.log("deviceReady");
        self.deviceReadyDeferred.resolve();
    },

    this.run = function() {
        console.log("main");
    }

}

app = new App();
app.init();
4

4 に答える 4

3

thisの中に

this.onDeviceReady = function() {
    ...
}

thisそれの外側と同じではありません。jQueryには、データをイベントハンドラーに渡すことにより、これを回避する組み込みの方法があります。

function App() {

    this.deviceReadyDeferred = new $.Deferred();

    this.init = function () {
        console.log("Run");
        $.when(this.deviceReadyDeferred).then(this.run);
        $(document).on("click", { App: this }, this.onDeviceReady);
    },

    // NB: onDeviceReady non ha parametri evento
    this.onDeviceReady = function (e) {
        console.log("deviceReady");
        e.data.App.deviceReadyDeferred.resolve();
    },

    this.run = function () {
        console.log("main");
    }

}

app = new App();
app.init();

http://jsfiddle.net/6zAN7/17/

または、IE8をサポートする必要がない場合は、ネイティブメソッドを使用するとさらに簡単になります（注.bind(this)）：

function App() {

    this.deviceReadyDeferred = new $.Deferred();

    this.init = function () {
        console.log("Run");
        $.when(this.deviceReadyDeferred).then(this.run);
        document.addEventListener("click", this.onDeviceReady.bind(this), false);

    },

    // NB: onDeviceReady non ha parametri evento
    this.onDeviceReady = function () {
        console.log("deviceReady");
        this.deviceReadyDeferred.resolve();
    },

    this.run = function () {
        console.log("main");
    }

}

app = new App();
app.init();

http://jsfiddle.net/6zAN7/18/

于 2013-03-20T22:16:04.393 に答える
2

他の回答はすでに原因を説明しています、それthisはコールバック内の値です。thisこれを解決する方法の1つは、特定の値にバインドされた新しい関数を作成することです。

document.addEventListener("click", this.onDeviceReady.bind(this), false);

ネイティブで利用できない場合は、シムbindが必要です。

于 2013-03-20T22:17:57.463 に答える
1 
this.init = function() {
    console.log ("Run");
    var self = this;
    $.when(this.deviceReadyDeferred).then(self.run);
    document.addEventListener("click", self.onDeviceReady, false);

},
于 2013-03-20T22:16:19.770 に答える
1

Kevin Bが言うように、あなたthisはそもそもそのイベントにバインドしているので、documentあなたのclickハンドラーの中にいます。document

この状況を回避する簡単な方法は、$。proxy（）を使用することです。

document.addEventListener("click", $.proxy(this.onDeviceReady, this), false);
于 2013-03-20T22:19:11.467 に答える