JavaScript中的var that = this用法及用途解析|极客笔记

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

在编写JavaScript代码时，我们经常会遇到需要在某个函数内部访问外部函数的this指向的情况。然而，由于JavaScript中this的指向机制的特殊性，直接使用this可能会导致意想不到的结果。为了解决这个问题，开发者们经常使用var that = this的方式来保存正确的this指向，并在内部函数中使用that来代替this。本文将详细解析var that = this的用法及用途。

1. 为什么需要var that = this？

在JavaScript中，函数的this指向取决于函数被调用的方式。在全局作用域中，this指向全局对象（在浏览器中指向window对象），而在函数内部，this的指向则会根据调用方式的不同而有所差异。

例如，在一个对象的方法中，this指向该对象本身。然而，在内部函数中，this的指向会发生变化，指向全局对象。

var obj = {
  name: 'John',
  sayHello: function() {
    console.log('Hello, ' + this.name);
    function innerFunc() {
      console.log('Inner function: ' + this.name);
    }
    innerFunc();
  }
};

obj.sayHello();

输出结果为：

Hello, John
Inner function: undefined

可以看出，在内部函数innerFunc中，this.name的结果为undefined，这是因为this指向了全局对象，而全局对象没有name属性。

为了解决这个问题，我们可以通过var that = this来保存正确的this指向，并在内部函数中使用that来代替this。

var obj = {
  name: 'John',
  sayHello: function() {
    var that = this;
    console.log('Hello, ' + this.name);
    function innerFunc() {
      console.log('Inner function: ' + that.name);
    }
    innerFunc();
  }
};

obj.sayHello();

输出结果为：

Hello, John
Inner function: John

使用that保存外部函数的this指向后，在内部函数innerFunc中，通过访问that.name可以正确地获取到外部函数的name属性。

2. var that = this的原理及用法解析

在上述例子中，var that = this的使用解决了内部函数中this指向的问题。那么，这种用法的原理是什么呢？

在JavaScript中，变量的作用域是基于函数的，而不是像其他编程语言一样基于块级作用域。这就意味着在一个函数内部，我们可以访问函数所在作用域中的变量。

当我们声明一个变量并将this赋值给它时，这个变量相当于在该函数作用域中创建了一个新的变量。由于该变量是在外部函数中定义的，它将保持外部函数的this指向。

这种用法在需要在多层嵌套的函数中访问外部函数的this指向时特别有用。通过在每个函数中都保存一份对外部this的引用，我们可以确保在任何深度的函数嵌套中都能正确地访问到外部函数的属性和方法。

3. var that = this的适用场景

var that = this这种用法在实际的JavaScript开发中非常常见，适用于以下场景：

3.1 闭包中使用外部函数的this

在闭包中，由于this的指向问题，我们无法直接访问外部函数的this指向，这时就可以使用var that = this来保存正确的this指向。

function outerFunc() {
  var that = this;
  var name = 'John';
  function innerFunc() {
    console.log(that.name);
  }
  return innerFunc;
}

var inner = outerFunc();
inner(); // 输出: "John"

3.2 异步回调函数中访问外部函数的this

在异步回调函数中，由于回调函数是在事件发生后才执行的，此时外部函数的this已经发生了改变，无法直接访问。使用var that = this可以在回调函数中访问外部函数的this指向。

function ajaxRequest(callback) {
  var that = this;
  setTimeout(function() {
    callback.call(that);
  }, 1000);
}

var obj = {
  name: 'John',
  getData: function() {
    ajaxRequest(function() {
      console.log(this.name);
    });
  }
};

obj.getData(); // 输出: "John"

3.3 jQuery事件处理函数中访问外部函数的this

在jQuery事件处理函数中，默认将事件绑定的元素设置为this指向。如果需要在事件处理函数中访问外部函数的this指向，可以使用var that = this保存正确的this。

var obj = {
  name: 'John',
  handleClick: function() {
    var that = this;
    $('button').click(function() {
      console.log(that.name);
    });
  }
};

obj.handleClick(); // 输出: "John"