Question

我是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，即使在相同的代码行中也存在混合使用。

为了便于阅读和维护，是否最好使用this或that？

注意：我意识到很多这类事情都取决于开发者的偏好。但在我决定重写代码以使用其中一个代码之前，我想了解任何推理，如果/为什么一个优先于另一个。

编辑：在此脚本中，我认为仅原因this被分配给本地变量，以便可以从内部引用它内封闭。

Answer 1

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

this是一个特殊变量，与普通局部变量略有不同，它自动设置为调用函数的对象（如果有的话）;否则，全局对象。然而，jQuery自由使用call和apply使this的内在价值有些混乱，这允许调用者指定 {{1}的值}}

在嵌套函数中，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即使只有一个引用也可以节省成本。

Answer 2

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

Answer 3

如果你遇到将this分配给局部变量的麻烦，那么使用它可能是一个好主意，特别是如果你给局部变量一个有用的名字：

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

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

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

Answer 4

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

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

虽然that通常不是一个非常好的变量名称，但我认为在这种情况下其含义仍然很明确。在我看来，在内部范围内，。 >

由于这是一个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小部件使用的相同约定是有意义的。

Answer 5

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

然而，变量名无关紧要，只是引用分配的对象。我们可以使用$this，$that，$obj，that，obj，button等作为我们的变量名称，但{{1}在javascript中是一个保留字，指的是当前范围内的对象，因此我们不能使用this作为变量名。您无法将任何类型的值分配给this或this。

示例...

$(this)

上述两个陈述都会引发异常。

使用this = 'something'; // or $(this) = 'something';的示例如下所示

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

$this = $(this);

是否最好使用“this”或“that”（其中var = this）？

5 个答案: