JavaScript如何改变this指向？三种方法浅析-猿码集

引言

在JavaScript中，this关键字是一个很重要的概念，它指向了当前函数的上下文环境。然而，有时候我们希望改变this的指向，比如在回调函数中访问到其所属对象的属性时。本文将介绍三种改变this指向的方法。

方法一：使用call方法

什么是call方法

call方法是JavaScript中Function对象的方法之一，它允许我们在调用函数的时候改变函数内部的this指向。call方法的语法如下：

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

其中，thisArg为要绑定到函数上下文中的对象，arg1, arg2, ...为函数执行时的参数。

如何使用call方法

我们可以使用call方法来调用一个函数，并将一个对象绑定到函数的this上下文中。下面是一个例子：

let person1 = {name: 'Alice', age: 25};
let person2 = {name: 'Bob', age: 30};
function sayHello() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
sayHello.call(person1); // Hello, my name is Alice and I am 25 years old.
sayHello.call(person2); // Hello, my name is Bob and I am 30 years old.

在上面的例子中，我们定义了两个对象person1和person2，以及一个函数sayHello。通过调用sayHello.call(person1)，我们将person1对象绑定到sayHello函数的this上下文中，从而获得了该对象的属性。

call方法的优点

使用call方法可以方便地将一个对象绑定到函数的this上下文中，从而访问该对象的属性和方法。此外，call方法还可以用于在函数之间共享代码和变量。

方法二：使用apply方法

什么是apply方法

apply方法与call方法类似，不同之处在于它接受的参数列表是一个数组。

function.apply(thisArg, [argsArray])

其中，argsArray为要传递给函数的参数数组。

如何使用apply方法

我们可以使用apply方法来调用一个函数，并将一个对象绑定到函数的this上下文中。下面是一个例子：

let person1 = {name: 'Alice', age: 25};
let person2 = {name: 'Bob', age: 30};
function sayHello(extraMessage) {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old. ${extraMessage}`);
}
sayHello.apply(person1, ['Nice to meet you!']); // Hello, my name is Alice and I am 25 years old. Nice to meet you!
sayHello.apply(person2, ['How are you doing?']); // Hello, my name is Bob and I am 30 years old. How are you doing?

在上面的例子中，我们定义了两个对象person1和person2，以及一个函数sayHello。通过调用sayHello.apply(person1, ['Nice to meet you!'])，我们将person1对象绑定到sayHello函数的this上下文中，并传递了一个参数数组['Nice to meet you!']。

apply方法的优点

与call方法类似，apply方法可以方便地将一个对象绑定到函数的this上下文中，并传递参数数组。此外，apply方法还可以用于函数的继承和调用实现。

方法三：使用bind方法

什么是bind方法

bind方法是Function对象的另一个方法，它可以创建一个新的函数，该函数将this关键字绑定到指定对象。

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

其中，thisArg为要绑定到函数上下文中的对象，arg1, arg2, ...为在调用新函数时要传递的参数。

如何使用bind方法

我们可以使用bind方法创建一个新函数，并将一个对象绑定到该函数的this上下文中。下面是一个例子：

let person1 = {name: 'Alice', age: 25};
let person2 = {name: 'Bob', age: 30};
function sayHello(extraMessage) {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old. ${extraMessage}`);
}
let sayHelloToAlice = sayHello.bind(person1, 'Nice to meet you!');
let sayHelloToBob = sayHello.bind(person2, 'How are you doing?');
sayHelloToAlice(); // Hello, my name is Alice and I am 25 years old. Nice to meet you!
sayHelloToBob(); // Hello, my name is Bob and I am 30 years old. How are you doing?

在上面的例子中，我们定义了两个对象person1和person2，以及一个函数sayHello。通过调用sayHello.bind(person1, 'Nice to meet you!')，我们创建了一个新函数sayHelloToAlice，并将person1对象及其它参数绑定到该函数的this上下文中。当我们调用sayHelloToAlice()时，即调用新函数时，该函数将打印出person1对象的属性。

bind方法的优点

bind方法可以方便地创建一个新函数，并将一个对象绑定到该函数的this上下文中。此外，bind方法还可以用于函数的柯里化实现，即将一个多参数的函数转化为多个单参数的函数。

总结

本文介绍了三种改变JavaScript中this指向的方法：call、apply和bind。使用这些方法可以方便地将一个对象绑定到函数的this上下文中，从而访问该对象的属性和方法。同时，这些方法还可以用于函数之间的共享代码和变量，以及函数的柯里化和继承。

JavaScript如何改变this指向？三种方法浅析

引言