2

语境

当我使用 jQuery 时，我经常需要保存this一个变量：

var obj = {
    myVar: null,
    myFunction1: function() { ... },
    myFunction2: function() {
        this.myVar = "blabla";
        this.myFunction1();

        var ctx = this;
        $('xxx').click(function () {
            ctx.myFunction1();
        });
    }
}

在这种情况下，我将 all 替换this为我的变量：

var obj = {
    myVar: null,
    myFunction1: function() { ... },
    myFunction2: function() {
        var ctx = this;

        ctx.myVar = "blabla";
        ctx.myFunction1();

        $('xxx').click(function () {
            ctx.myFunction1();
        });

        //etc. I do it for all "this" even if I have 15 "this"...
    }
}

问题

  • 保持this变量是一种好习惯吗？还有其他方法吗？
  • this用变量替换 all 是一种好习惯吗？
4

5 回答 5

3

this在不同的功能中是不同的。在那种情况下，上下文是不同的。

因此，将它保存在一个单独的变量中是明智的，这样您就可以确定您正在与什么上下文对话。

在有子功能的功能中，我建议这样做，而在常规功能中则不要。那里没有必要。

注意：您不会替换它，您只是有一个指向正确上下文的指针。

于 2012-09-03T15:22:24.010 回答
2

还有其他方法吗？

是的：您可以使用匿名自执行函数将引用传递给范围

myFunction2: function() {
    this.myVar = "blabla";
    this.myFunction1();

    (function(outerscope) {
        $('xxx').click(function () {
            outerscope.myFunction1();
        });
    }(this));
 }

无论如何，像您所做的那样存储引用是可以的（或者至少，谷歌 javascript 样式指南中不鼓励将其作为一种不好的做法），并且它是一种广泛使用的常见做法。

于 2012-09-03T15:22:56.917 回答
2

还有其他方法吗？

您可以使用$.proxy [文档]：

$('xxx').click($.proxy(function () {
    this.myFunction1();
}, this));

这显然会覆盖this事件处理程序内部，因此您无法通过this.

您也可以this作为事件数据[docs]传递：

$('xxx').click({ctx: this}, function (event) {
    event.data.ctx.myFunction1();
});

做任何你认为最易读的事情。我个人只是在嵌套函数和其他任何地方分配var self = this;和使用。selfthis

于 2012-09-03T15:25:36.603 回答
1

我总是用来创建：

var _self = this;

老实说，我不知道这是否是最佳实践，但自从我用 js 编写代码后，我看到很多人都在这样做，我觉得使用它很舒服。

于 2012-09-03T15:23:29.817 回答
1

这通常是一种公认​​的模式，但是当您在函数中具有函数时（在 func-functions-tions 内;-) 等，它可能会让人感到困惑

缓解这种情况的一种方法（以及一般的替代方法）是将您的函数绑定到特定的上下文对象。ECMAScript 5 的 bind() 函数可以处理这个问题，但在 Web 环境中使用可能还不安全。

现在您可以改用jQuery 的代理功能：

    $('xxx').click(jQuery.proxy(function () {
        this.myFunction1();
    }, this));
于 2012-09-03T15:29:34.283 回答