一、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代码非常有帮助。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/297341.html
微信扫一扫 
支付宝扫一扫 