彻底告别this困扰，带你深度理解JS的this指向

2023-12-08 04:57:26

在JavaScript中，this是一个非常重要的概念，它是函数执行时内部的this值，但它的指向往往令人困惑。为了帮助读者彻底搞懂this指向，本文将从数据存储方式到判断方法，再到六道真题解析，全面剖析this指向，让读者对this指向有更加深刻的理解。

数据存储方式：

JavaScript中，this指向的数据存储方式有两种：词法作用域和动态作用域。词法作用域是指函数在声明时确定的this指向，而动态作用域是指函数在执行时确定的this指向。JavaScript中的this指向通常遵循词法作用域，但在某些情况下会采用动态作用域，这使得this指向变得更加复杂。

判断方法：

判断this指向的方法有很多，最常用的方法有：

箭头函数： 箭头函数没有自己的this值，它总是继承外层函数的this值。
bind()方法： bind()方法可以将函数的this值绑定到指定的上下文对象，即使该函数在其他地方被调用，它的this值也不会改变。
call()方法和apply()方法： call()方法和apply()方法可以显式地设置函数的this值，它们的参数列表与bind()方法不同，call()方法接受一个参数列表，而apply()方法接受一个数组作为参数列表。

六道真题解析：

为了帮助读者更好地理解this指向，本文将解析六道经典的this指向真题：

问题一： 在以下代码中，this指向什么？

var obj = {
  name: 'John',
  getName: function() {
    return this.name;
  }
};

console.log(obj.getName());

问题二： 在以下代码中，this指向什么？

var name = 'John';

var getName = function() {
  return this.name;
};

console.log(getName());

问题三： 在以下代码中，this指向什么？

function Person(name) {
  this.name = name;
}

var person = new Person('John');

console.log(person.name);

问题四： 在以下代码中，this指向什么？

var obj = {
  name: 'John',
  getName: function() {
    return function() {
      return this.name;
    }
  }
};

console.log(obj.getName()());

问题五： 在以下代码中，this指向什么？

var obj = {
  name: 'John',
  getName: function() {
    return this;
  }
};

console.log(obj.getName() === obj);

问题六： 在以下代码中，this指向什么？

var obj = {
  name: 'John',
  getName: function() {
    var that = this;
    return function() {
      return that.name;
    }
  }
};

console.log(obj.getName()());