JavaScript中的var that = this用法及用途解析

一、What is var that = this?

在JavaScript中，var that = this這個語句經常被用於解決this指向問題。實際上，它的作用是將指向函數對象的this賦值給另一個變量that。這樣，在後續的代碼中，就可以通過that來訪問函數對象了。

function Person(name, age) {
  var that = this; //將this賦值給that
  this.name = name;
  this.age = age;
  this.info = function() {
    console.log(that.name + " is " + that.age + " years old");
  }
}

var person = new Person("Tom", 18);
person.info(); //輸出：Tom is 18 years old

在上面的例子中，that變量被賦值為this，然後在函數中使用that訪問Person對象的屬性，而不是直接使用this。這就解決了this指向問題。

二、Why use var that = this?

1. 解決this指向問題

JavaScript中的this始終指向當前執行上下文的對象，但是在不同的情況下，它指向的對象不同。比如在事件處理函數中，this指向的是觸發事件的元素，而不是函數所在的對象。這時候就可以使用var that = this來解決this指向問題。

var btn = document.getElementById("btn");
btn.onclick = function() {
  var that = this; //解決this指向問題
  setTimeout(function() {
    that.innerHTML = "clicked";
  }, 1000);
}

在上面的例子中，當按鈕被點擊後，setTimeout中的回調函數中的this指向的是window對象，而不是按鈕元素。這時候使用var that = this可以將按鈕元素保存到that變量中，供後續使用。

2. 避免在函數中多次使用this

在JavaScript中，函數中使用this的次數較多，而且在不同的執行上下文中，this指向的對象也不同。這就容易造成混淆和錯誤。在這種情況下，使用var that = this可以避免在函數中多次使用this，使代碼更加清晰和易懂。

var obj = {
  foo: function() {
    var that = this; //避免在函數中多次使用this
    function bar() {
      console.log(that); //輸出：{foo: ƒ}
    }
    bar();
  }
};
obj.foo();

在上面的例子中，bar函數中的this指向的是window對象，而不是obj對象。使用var that = this將this保存到that變量中，可以避免在函數中多次使用this，避免了混淆和錯誤。

3. 解決閉包中的作用域問題

在閉包中，內部函數可以訪問外部函數中定義的變量。但是在外部函數中使用this時，this指向的對象並不是外部函數的對象，而是全局對象或undefined。在這種情況下，使用var that = this可以將外部函數中的this保存到that變量中，以備內部函數使用。

var obj = {
  foo: function() {
    var that = this; //保存外部函數中的this
    function bar() {
      console.log(that); //輸出：{foo: ƒ}
    }
    return bar;
  }
};
var fn = obj.foo();
fn();

在上面的例子中，foo函數返回bar函數。bar函數中使用了外部函數中的this，如果不使用var that = this將this保存到that變量中，bar函數中的this將指向全局對象window，而不是obj對象。

三、Conclusion

在JavaScript中，使用var that = this可以解決this指向問題、避免在函數中多次使用this、以及解決閉包中的作用域問題。它是一種簡單而有效的編程技巧，對編寫清晰、可維護的JavaScript代碼非常有幫助。