改变this指向

改变this的方法

1. 箭头函数

2. call/apply

3. bind

使用 call() 或 apply() 方法：这两个方法是 Function.prototype 的方法，可以显式地调用函数，并指定函数执行时的 this 值。

• call() 方法接受一个对象作为第一个参数，该对象将成为函数内部的 this 值。之后的参数是传递给函数的参数列表。
• apply() 方法与 call() 类似，但接受的参数列表是一个数组或类数组对象

演示代码

function sayHello() {
  console.log("Hello, " + this.name);
}

var person = {
  name: "John"
};

sayHello.call(person);  // Hello, John

sayHello.apply(person); // Hello, John

使用 bind() 方法：bind() 方法创建一个新的函数，并指定函数执行时的 this 值。与 call() 和 apply() 不同，bind() 并不会立即调用函数，而是返回一个新的函数，可以稍后调用

演示代码

function sayHello() {
  console.log("Hello, " + this.name);
}

var person = {
  name: "John"
};

var sayHelloPerson = sayHello.bind(person);

sayHelloPerson();  // Hello, John

使用箭头函数来改变 this 的指向，箭头函数会继承外部函数的 this 值。因此，箭头函数的 this 是在定义时确定的

演示代码

var person = {
  name: "John",
  sayName: function() {
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
};

person.sayName();  // John

注意：call(),apply(),bind()方法不会改变原函数的this值，会返回一个新的函数