图解JavaScript中的this关键字

在JavaScript中，this关键字是一个非常重要和常用的概念。this关键字代表着当前调用函数的对象。但是，由于JavaScript中函数的灵活性，this的值有时会令人不太容易理解和把握。本文将图解this的实际应用及其背后的原理，帮助读者更好地理解和应用this关键字。

this的取值方式

JavaScript中函数的调用方式可以分为以下几种，不同的调用方式影响了this的取值。

1.函数调用

这是最简单的一种方式，直接以函数名作为入口调用函数。

function example() {
  console.log(this);
}
example(); // Window

这时，函数体中的this关键字被绑定到了全局对象window上。

2.对象方法调用

在一个对象方法中调用this时，this被绑定到该方法所属的对象上。

const person = {
  name: 'Tom',
  sayHello() {
    console.log(this.name);
  }
};
person.sayHello(); // Tom

3.构造函数调用

构造函数调用方式一般用于实例化对象，此时this被绑定到新创建的对象上。

function Person(name) {
  this.name = name;
}
const person = new Person('Tom');
console.log(person); // Person { name: 'Tom' }

在构造函数调用中，this所绑定到的是通过new构造函数创建出的新对象。

4.apply/call调用

通过函数的apply或call方法调用函数时，可以明确指定this应该绑定的对象。

function introduce() {
  console.log(`Hi, my name is ${this.name}.`);
}
const person = { name: 'Tom' };
introduce.call(person); // Hi, my name is Tom.

在apply和call调用中，第一个参数可以是要绑定到this上的对象。

this的注意事项

由于JavaScript中函数的灵活性和变化多端，this关键字可能会引起一些意料之外的问题。下面介绍两个比较常见的注意事项。

1.箭头函数

箭头函数在规定了this后，不会在执行的时候被改变。

const person = {
  name: 'Tom',
  sayHello: () => {
    console.log(this.name);
  }
};
person.sayHello(); // undefined

这里因为箭头函数所绑定的this是在定义函数时就被锁定住的，因此即使通过对象调用，this还是会被绑定到全局对象上。

2.回调函数

回调函数中的this指向可能会因为回调函数的不同场景而有所不同。

const person = {
  name: 'Tom',
  sayHello() {
    console.log(`Hi, my name is ${this.name}.`);
    setTimeout(function () {
      console.log(`But you can call me ${this.nickname}.`);
    }, 1000);
  },
  nickname: 'Tommy'
};
person.sayHello();
// Hi, my name is Tom.
// Uncaught TypeError: Cannot read properties of undefined (reading 'nickname')

在这个例子中，setTimeout函数中的回调函数this指向的是window对象，因此在这里访问this.nickname会抛出类型错误。

解决这个问题有两种方法：

1. 使用箭头函数

 const person = {
  name: 'Tom',
  sayHello() {
    console.log(`Hi, my name is ${this.name}.`);
    setTimeout(() => {
      console.log(`But you can call me ${this.nickname}.`);
    }, 1000);
  },
  nickname: 'Tommy'
};
person.sayHello();

1. 在调用回调函数的时候明确指定this

const person = {
  name: 'Tom',
  sayHello() {
    const self = this;
    console.log(`Hi, my name is ${this.name}.`);
    setTimeout(function () {
      console.log(`But you can call me ${self.nickname}.`);
    }, 1000);
  },
  nickname: 'Tommy'
};
person.sayHello();