使用“;这个“;或“;“;(其中var that=this）

Is it preferable to use "this" or "that" (where var that = this)?

本文关键字：that var this 这个 使用 其中      更新时间：2023-09-26

我对JavaScript还很陌生，我正在清理下载的一些JavaScript代码。该代码中的不一致之处之一是混合使用了this和引用它的局部变量that

示例代码片段(jQueryUI小部件中的私有方法(：

_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，甚至在同一行代码中也有混合使用。

为了可读性和可维护性，最好使用this还是that？

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

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

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

this是一个特殊变量，与正常的局部变量有些不同，因为它自动设置为调用函数的对象(如果有的话(；否则，全局对象。然而，由于jQuery对call和apply的自由使用，使得this的这个内在值有些模糊，这允许调用者指定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可以节省开支，即使使用单个引用也是如此。

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

如果您遇到将this分配给局部变量的麻烦，使用它可能是个好主意，尤其是如果您给局部变量起了一个有用的名称：

$('body').on('click', '.something', function() {
  var clicked = this;
  // now "clicked" is the element clicked on
});

对于jQuery示例，但无论是库还是原始JavaScript，都是相同的问题。就我个人而言，我认为"that"在几乎所有情况下都是一个相当弱的变量名。

如果将this分配给局部变量的目的是实现语义，那么使用语义变量名，然后使用变量而不是this是有意义的。

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

虽然that通常不是一个很好的变量名，但我认为在这种情况下其含义仍然很清楚。在我看来，在内部范围内，那个就是这个，因为父母是自己。

由于这是一个jQueryUI小部件，我查看了一些与jQueryUI一起"附带"的标准小部件的来源。除了需要引用外部作用域的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`
},

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

在使用jQuery时将变量分配给$(this)时，最好使用$this，因为它指的是jQuery对象($(。当$(this)在另一个函数的作用域中不再引用父对象时，通常使用它。

然而，变量名并不重要，只是指指定的对象。我们可以使用$this、$that、$obj、that、obj、button等作为我们的变量名，但javascript中的this是一个保留字，指的是当前范围内的对象，因此我们不能使用this作为变量名。不能将任何类型的值分配给this或$(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);
    });
});
相关文章：