0

这是我的 javascript 代码它的目标只是为了教育。我正在学习 js OOP 和 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();

当我点击时，我收到

类型错误：this.deviceReadyDeferred 未定义

为什么？

  • 我没有收到未定义的“$”，因此 jQuery 运行良好。
  • 我在 Win 7 上的 FF 19.0.2 上运行 jQuery 1.9.1

如何使用 deferred 到 javascript 对象中？如何初始化和重用它？

编辑：

此代码正在运行。所有的问题都出在我对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值的新函数：

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

如果本机不可用，则需要垫片。bind

于 2013-03-20T22:17:57.463 回答
1

正如 Kevin B 所说，this它document在您的click处理程序中，因为您首先绑定到该事件document。

解决这种情况的一种简单方法是使用$.proxy()：

document.addEventListener("click", $.proxy(this.onDeviceReady, this), false);
于 2013-03-20T22:19:11.467 回答
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 回答