掌握JS中this指向只需记忆5大原则

在JavaScript中，this是一个特殊，它指向当前函数执行时所属的对象。this的指向在函数运行时确定，而不是在函数定义时。因此，this的指向可能会在函数执行过程中发生变化。

影响this指向的因素有很多，但最重要的因素是函数的调用方式。有5种主要的方法可以调用函数，每种方法都会导致不同的this指向。

1. 方法调用

当一个函数作为另一个对象的方法 调用时，this指向调用该方法的对象。例如：

const person = {
  name: 'John',
  speak: function() {
    console.log(`My name is ${this.name}.`);
  }
};

person.speak(); // My name is John.

在上面的例子中，当调用speak方法时，this指向person对象。这是因为speak方法是作为person对象的方法 调用的。

2. 函数调用

当一个函数作为一个独立的函数调用时，this指向window对象。例如：

function sayHello() {
  console.log(`Hello, world!`);
}

sayHello(); // Hello, world!

在上面的例子中，当调用sayHello函数时，this指向window对象。这是因为sayHello函数是一个独立 的函数，它没有被任何对象调用。

3. 构造函数调用

当一个函数作为构造函数 调用时，this指向一个新创建的对象。例如：

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

const person = new Person('John');

console.log(person.name); // John

在上面的例子中，当调用Person函数时，this指向一个新创建的Person对象。这是因为Person函数是一个构造函数 ，它被用来创建新的对象。

4. apply()和call()方法调用

apply()和call()方法可以用来显式地设置函数的this指向。例如：

const person = {
  name: 'John'
};

function sayHello() {
  console.log(`My name is ${this.name}.`);
}

sayHello.call(person); // My name is John.

在上面的例子中，当调用sayHello函数时，我们使用call()方法显式地将this指向person对象。因此，this指向person对象。

5. 箭头函数调用

箭头函数的this指向与它的外层 函数相同。例如：

const person = {
  name: 'John',
  speak: () => {
    console.log(`My name is ${this.name}.`);
  }
};

person.speak(); // My name is John.

在上面的例子中，当调用speak方法时，this指向person对象。这是因为speak方法是一个箭头函数 ，它的this指向与它的外层函数相同。

总结

this指向是一个复杂的概念，但只要记住影响this指向的5大原则，你就能在代码运行之前就可以判断出this的指向。

• 当一个函数作为另一个对象的方法 调用时，this指向调用该方法的对象。
• 当一个函数作为一个独立 的函数调用时，this指向window对象。
• 当一个函数作为构造函数 调用时，this指向一个新创建的对象。
• apply()和call()方法可以用来显式地设置函数的this指向。
• 箭头函数的this指向与它的外层 函数相同。