3

我对 JavaScript 相当陌生，我正在清理我下载的一些 JavaScript 代码。此代码中的不一致之一是混合使用两者和引用它this的局部变量。that

示例代码片段（jQuery UI 小部件中的私有方法）：

_populateLists: function(options) {
    //do stuff with this

    var that = this;
    options.each(function(index) {
        //use both this AND that, they are different in this scope
    });

    //here this and that are the same thing
    //I want to be consistent, is one preferable over the other?
},

在整个代码中的许多地方this === that，即使在同一行代码中，也有混合使用的地方。

为了可读性和可维护性，最好使用thisor that？

注意：我意识到很多这些类型的事情取决于开发人员的偏好。但是在我决定重写代码以使用一个而不是另一个之前，我想了解任何推理是否/为什么一个比另一个更受欢迎。

编辑：在这个脚本中，我认为分配给局部变量的唯一原因this是可以从内部闭包中引用它。

4

5 回答 5

4

通常将的值this分配给局部变量的原因是您可以关闭该值并在嵌套函数中使用它。

this是一个特殊变量，与普通的局部变量有些不同，因为它会自动设置为调用函数的对象（如果有的话）；否则，全局对象。this但是， jQuery 对 and 的自由使用使得 of 的这种内在价值有些混乱call，它apply允许调用者指定的值this。

在嵌套函数中，this不会this以与通过作用域链继承父级局部变量相同的方式继承其父级的值。

因此，this如果我们需要在嵌套函数中（例如each您的示例中的回调），我们必须将 的值存储在局部变量中。

var a = { fn: function() {
    // here, `this` is the object `a`
    var x = this;
    function b() {
        // here, `this` is `window` because `b` is invoked with no context
        // ...but we still have access to `x`, whose value would be `a`
    }
    b();
}};

a.fn(); // by invoking `fn` as a property of `a`, we implicitly set `fn`'s
        // `this` to `a`.

// Compare to:
var f = a.fn;
f();    // we now invoke `fn` with no context, so its `this` will be `window`.
a.fn.call(window); // or by specifying context explicitly

当然，当您仍在父范围内时，this仍将相等that（self或其他）。乍一看，两者之间似乎没有区别，但有一个重要的性能影响：

缩小。 如果分配this给局部变量，则对该变量的所有引用都可以减少为一个字符。引用this不能。比较这个缩小的输出：

function a() {this.w=1;this.x=2;this.y=3;this.z=4;}
function b() {var t=this;t.w=1;t.x=2;t.y=3;t.z=4;}

使用 4 次引用this，您可以使用变量保存字节。如果您this无论如何都必须为内部函数进行捕获，那么使用局部变量而不是this在外部函数中可以为您节省成本，即使使用单个引用也是如此。

于 2012-12-26T22:48:43.180 回答
2

除了一致性的标准主观理由和有意义的变量名称之外，没有任何理由。

于 2012-12-26T21:55:04.627 回答
0

如果您为分配this给局部变量而烦恼，那么使用它可能是一个好主意，特别是如果您为局部变量指定了一个有用的名称：

$('body').on('click', '.something', function() {
  var clicked = this;

  // now "clicked" is the element clicked on
});

对于 jQuery 示例，但无论库或原始 JavaScript 是什么，它都是相同的问题。我个人认为“that”在几乎所有情况下都是一个非常弱的变量名。

于 2012-12-26T21:52:16.723 回答
0

在使用 jQuery 时为变量赋值$(this)时，最好使用$this它，因为它指的是 jQuery 对象 ( $)。$(this)当在另一个函数的范围内不再引用父对象时，通常使用它。

然而，变量名并不重要，它只是指分配的对象。我们可以使用$this, $that, $obj, that,obj等button作为我们的变量名，但是this在 javascript 中是一个保留字，指的是当前范围内的对象，因此我们不能this用作变量名。您不能将任何类型的值分配给thisor $(this)。

例子...

this = 'something'; // or
$(this) = 'something';

以上两个语句都会抛出异常。

使用示例$this = $(this);如下所示

要在成功的 jQuery 发布后更改 id 为“someButton”的按钮的 html...

$('#someButton').click(function() {
    var data = $('form').serializeArray();
    // some validation or something

    $this = $(this);
    // note the lack of the var command to 
    // globalize $this within the click function

    $.post('somePage',data,function(html) {
         $this.html(html); 
         // identical to $('#someButton').html(html);
    });
});
于 2013-02-05T17:16:42.817 回答
0

如果分配this给局部变量的目的是为了实现语义，那么使用语义变量名然后使用变量而不是this.

但是由于在这种情况下分配给局部变量的目的是缓存它以在内部函数中使用，所以我认为在外部范围内this继续使用更具可读性/语义。this

虽然that通常不是一个很好的变量名，但我认为在这种情况下含义仍然很清楚。在我看来，在内部范围内，对this as parent对self。

由于这是一个 jQuery UI 小部件，我查看了一些与 jQuery UI 一起“发布”的标准小部件的来源。它似乎是this贯穿始终使用的标准约定，除非需要引用this外部范围的 。在后一种情况下，this缓存在名为 的变量中that。即使局部变量存在，它也只在内部范围内使用。

为清楚起见的示例：

_populateLists: function(options) {
    var that = this; //we'll need `this` within a closure later

    //do some stuff with `this`

    options.each(function(index) {
        //do stuff with `this` AND `that`
        //`that` is the `this` of the outer scope
    });

    //do some more stuff with `this`
},

如果一致性是目标，那么遵循标准 jQuery UI 小部件使用的相同约定是有意义的。

于 2012-12-27T00:55:37.800 回答