js的this指向怎么改变

在JavaScript中，可以通过以下几种方式改变this的指向：使用call方法、使用apply方法、使用bind方法、在箭头函数中使用、通过对象方法调用来改变。 其中，call方法是最常见的一种方式，能直接指定this的指向并立即执行函数。

通过call方法，可以将一个函数的this关键字设定为指定的对象。例如：

function greet() {

    console.log('Hello, ' + this.name);
}
const person = {
    name: 'Alice'
};
greet.call(person); // Outputs: Hello, Alice

在这个例子中，greet函数中的this被显式地设定为person对象，使得this.name指向person.name。

一、使用call方法

call方法是JavaScript中用于设置函数上下文的一个强大工具。通过call方法，我们可以显式地指定函数的this值，并立即调用该函数。以下是具体的用法和示例：

使用call方法的语法

call方法的语法如下：

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

• functionName：要调用的函数。
• thisArg：在函数执行时指定的this值。
• arg1, arg2, ...：调用函数时传递的参数。

实际示例

假设我们有一个人对象和一个简单的函数，用于打印问候语：

function greet(greeting, punctuation) {

    console.log(greeting + ', ' + this.name + punctuation);
}
const person = {
    name: 'Alice'
};
greet.call(person, 'Hello', '!'); // Outputs: Hello, Alice!

在这个示例中，greet函数通过call方法被调用，并且this被设定为person对象。greet函数的参数greeting和punctuation分别传递为'Hello'和'!'。

二、使用apply方法

apply方法与call方法非常相似，不同之处在于apply方法接受一个包含多个参数的数组，而不是单独列出的参数。它同样可以改变函数内部的this指向。

使用apply方法的语法

apply方法的语法如下：

functionName.apply(thisArg, [argsArray])

• functionName：要调用的函数。
• thisArg：在函数执行时指定的this值。
• [argsArray]：一个数组或类数组对象，包含调用函数时传递的参数。

实际示例

继续使用之前的greet函数示例：

greet.apply(person, ['Hi', '.']); // Outputs: Hi, Alice.

在这个示例中，greet函数通过apply方法被调用，this被设定为person对象，且参数以数组形式传递。

三、使用bind方法

bind方法与call和apply不同，它不会立即执行函数，而是返回一个新函数，这个新函数的this被永久绑定为指定的对象。

使用bind方法的语法

bind方法的语法如下：

const boundFunction = functionName.bind(thisArg, arg1, arg2, ...)

• functionName：要绑定的函数。
• thisArg：在函数执行时指定的this值。
• arg1, arg2, ...：调用函数时传递的参数。

实际示例

假设我们需要一个绑定了this的新函数：

const boundGreet = greet.bind(person, 'Hey');

boundGreet('!!!'); // Outputs: Hey, Alice!!!

在这个示例中，greet函数被绑定到person对象，并且预设了第一个参数为'Hey'。调用boundGreet时，只需要传递剩余的参数。

四、在箭头函数中使用

箭头函数中的this与传统函数不同，它不会创建自己的this，而是继承自包含它的上下文。因此，在箭头函数中，this的指向是固定的，无法通过call、apply或bind来改变。

实际示例

const person = {

    name: 'Alice',
    greet: () => {
        console.log('Hello, ' + this.name);
    }
};
person.greet(); // Outputs: Hello, undefined

在这个示例中，箭头函数中的this继承自全局上下文，因此this.name是undefined。

五、通过对象方法调用来改变

当函数作为对象的方法被调用时，this指向调用该方法的对象。

实际示例

const person = {

    name: 'Alice',
    greet: function() {
        console.log('Hello, ' + this.name);
    }
};
person.greet(); // Outputs: Hello, Alice

在这个示例中，greet方法被person对象调用，因此this指向person对象。

六、总结

在JavaScript中，改变this的指向有多种方式，最常见的是通过call、apply和bind方法。call和apply方法立即调用函数并设定this值，而bind方法返回一个新的函数并永久绑定this值。此外，在箭头函数中，this继承自外部上下文，无法通过上述方法改变。理解并合理使用这些方法，可以帮助开发者更灵活地控制函数的上下文，编写出更简洁和高效的代码。

相关问答FAQs：

1. 什么是JavaScript中的this指向？

JavaScript中的this是一个特殊的关键字，它指向当前执行上下文中的对象。它的指向是动态的，根据不同的情况而变化。

2. 如何改变JavaScript中this的指向？

有几种方法可以改变JavaScript中this的指向：

• 使用函数的call()方法：通过call()方法可以显式地指定函数执行时的this指向。例如，通过functionName.call(object)的方式可以将函数的this指向object。
• 使用函数的apply()方法：和call()方法类似，apply()方法也可以显式地指定函数执行时的this指向。不同的是，apply()方法接受一个数组作为参数，将数组中的元素依次传递给函数。例如，通过functionName.apply(object, [arg1, arg2])的方式可以将函数的this指向object，并传递arg1和arg2作为参数。
• 使用函数的bind()方法：bind()方法返回一个新的函数，这个新的函数的this指向被绑定的对象。例如，通过var newFunction = functionName.bind(object)的方式可以创建一个新的函数newFunction，它的this指向object。

3. 什么情况下需要改变JavaScript中this的指向？

需要改变JavaScript中this的指向的情况有很多。一些常见的情况包括：

• 在事件处理程序中：当事件触发时，事件处理程序中的this指向触发事件的元素。如果需要在事件处理程序中使用其他对象的方法或属性，就需要改变this的指向。
• 在回调函数中：当使用回调函数时，回调函数中的this指向的是调用该回调函数的对象。如果需要在回调函数中使用其他对象的方法或属性，也需要改变this的指向。
• 在对象方法中：对象方法中的this指向调用该方法的对象。如果需要在对象方法中使用其他对象的方法或属性，同样需要改变this的指向。