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

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是一個特殊的變量，與普通局部變量有所不同，因爲它自動設置爲調用函數的對象（如果有的話）。否則，全局對象。然而，this的這個內在價值有點糊塗jQuery的自由使用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即使使用單個引用也可以節省成本。

Answer 2

如果你去分配this一個局部變量的麻煩，它可能使用它是一個好主意，特別是如果你給局部變量一個有用的名字：

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

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

爲一個jQuery例如，但是無論是庫還是原始JavaScript都是一樣的問題。就個人而言，我認爲在所有情況下，「這個」都是一個非常弱的變量名。

Answer 3

沒有任何理由，除了一致性和有意義的變量名稱的標準主觀理由。

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等作爲我們的變量名，但是this在JavaScript是一種保留字指的是在當前範圍內的對象，所以我們不能用this作爲變量名。您不能將任何類型的值分配給this或$(this)。

示例...

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

上述兩種語句都會引發異常。

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

要使用「someButton」的成功jQuery的崗位後的ID更改按鈕的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); 
    }); 
});