JS中改变this指向的方法(call和apply、bind)

JS中的函数中会有一个特殊的变量this，它代表当前函数的执行上下文。但是，由于JS是一门动态语言，函数都可以作为变量进行传递和赋值，那么函数内的this指向就可能会出现变化。在这种情况下，我们需要改变函数内this的指向，以确保函数能够正常执行。而JS中改变this指向的方法主要有三种，分别是call、apply和bind。

call

call() 方法可以调用一个函数，并且将函数内的this指向调用该函数的对象。它的语法结构为：

function.call(thisArg, arg1, arg2, ...)

• thisArg：需要被指定为当前函数的 this 对象的值。
• arg1, arg2, ...：传递给方法的参数列表。

如果函数不需要传递任何参数，则可以将第二个参数设为 null 或者 undefined。

示例一：改变函数内this指向

function sayName() {
  console.log(this.name);
}

var obj1 = {name: 'Tom'};
var obj2 = {name: 'Jack'};

sayName.call(obj1); // 输出：Tom
sayName.call(obj2); // 输出：Jack

示例二：借用方法

function greetings() {
  console.log('你好！我是' + this.name);
}

var person = {
  name: '张三',
  age: 25
}

greetings.call(person); // 输出：你好！我是张三

apply

apply() 方法与 call() 方法作用类似，但是 apply() 方法需要将参数打包成一个数组传递。它的语法结构为：

function.apply(thisArg, [arg1, arg2, ...])

• thisArg：需要被指定为当前函数的 this 对象的值。
• [arg1, arg2, ...]：一个包含所有需要传递给方法的参数的数组。

如果函数不需要传递任何参数，则可以将第二个参数设为 null 或者 undefined。

示例一：改变函数内this指向

function sayName() {
  console.log(this.name);
}

var obj1 = {name: 'Tom'};
var obj2 = {name: 'Jack'};

sayName.apply(obj1); // 输出：Tom
sayName.apply(obj2); // 输出：Jack

示例二：借用方法

function greetings() {
  console.log('你好！我是' + this.name);
}

var person = {
  name: '张三',
  age: 25
}

greetings.apply(person); // 输出：你好！我是张三

bind

bind() 方法与 call() 和 apply() 作用类似，但是不会立即调用函数。bind() 方法会创建一个新函数，其 this 值会被绑定到传递给 bind() 方法的值。如果调用 bind() 方法时传递了函数参数，那么这些参数会被传递给绑定后的函数。它的语法结构为：

function.bind(thisArg[, arg1[, arg2[, ...]]])

• thisArg：需要被指定为当前函数的 this 对象的值。
• [arg1[, arg2[, ...]]]：传递给方法的参数列表。

如果函数不需要传递任何参数，则可以省略 arg1, arg2, ... 参数。

示例一：改变函数内this指向

function sayName() {
  console.log(this.name);
}

var obj1 = {name: 'Tom'};
var obj2 = {name: 'Jack'};

var sayName1 = sayName.bind(obj1);
var sayName2 = sayName.bind(obj2);

sayName1(); // 输出：Tom
sayName2(); // 输出：Jack

示例二：借用方法

function greetings() {
  console.log('你好！我是' + this.name);
}

var person = {
  name: '张三',
  age: 25
}

var greetPerson = greetings.bind(person);
greetPerson(); // 输出：你好！我是张三

以上就是改变JS函数内this指向的三种方法(call、apply、bind)的详细讲解。