Question

这是我的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();

当我点击时，我会收到

TypeError：this.deviceReadyDeferred未定义

为什么？

我没有收到'$'是未定义的，所以jQuery运行正常。
我在Win 7上的FF 19.0.2上运行jQuery 1.9.1

如何使用延迟到javascript对象？如何初始化和重用它？

编辑：

此代码正常运行。所有问题都在于我滥用this。我是OOP的新手用javascript。

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();

Answer 1

中的

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/

Answer 2

其他答案已经解释了原因，它是回调中this的值。解决此问题的方法之一是创建一个绑定到特定this值的新函数：

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

如果本地不可用，则需要shim to bind。

Answer 3

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

},

Answer 4

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

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

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

OOP和jQuery：如何使用Deferred（）初始化var;

4 个答案: