Question

我有这个jQuery函数

$("#edit-modal").animate({ width: "90%" }, 400, function () {
    this.registrationsPanelWidth = $("#edit-modal").width() - this.modalWidth - 20;
    console.log(this.modalWidth);
});

然而在function()似乎this.似乎不知道或不可用，意味着console.log(this.modalWidth);导致未定义。

如何在我的完整功能中使用我的this.property？

Answer 1

当您传入匿名函数时，它会获得自己的this变量。

解决这个问题的最快方法是在外部作用域中创建对this的闭包引用，并在回调中使用引用变量。

var self = this;
$("#edit-modal").animate({ width: "90%" }, 400, function () {
    self.registrationsPanelWidth = $("#edit-modal").width() - self.modalWidth - 20;
    console.log(self.modalWidth);
});

顺便提一下，这是ES6箭头功能的完美用例。来自MDN的文档：

箭头函数表达式的语法比函数表达式短，并且不绑定它自己的this，arguments，super或new.target。这些函数表达式最适合非方法函数，不能用作构造函数。

如果您能够在项目中使用箭头功能，它将如下所示：

$("#edit-modal").animate({ width: "90%" }, 400, () => {
    this.registrationsPanelWidth = $("#edit-modal").width() - this.modalWidth - 20;
    console.log(this.modalWidth);
});

See the documentation on MDN for more information on arrow functions.

这在完整功能中不可用

1 个答案: