揭秘this指向：call与apply方法的微妙差别

2023-11-17 20:24:05

this指向的本质

在JavaScript中，函数的this指向由函数的调用方式决定。当一个函数作为对象的属性或方法被调用时，this指向该对象。例如：

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

person.greet(); // 输出: Hello, my name is John.

此时，this指向person对象，因为greet方法是作为person对象的一个属性被调用的。

然而，当一个函数作为独立的函数被调用时，this指向全局对象。例如：

function greet() {
  console.log(`Hello, my name is ${this.name}.`);
}

greet(); // 输出: Hello, my name is undefined.

此时，this指向全局对象，因为greet函数是作为独立的函数被调用的。

改变this指向的方法

为了满足不同的编程需求，JavaScript提供了两种改变this指向的方法：call方法和apply方法。

call方法

call方法允许我们指定一个函数的this指向。语法如下：

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

其中：

function：需要改变this指向的函数。
thisArg：指定this指向的对象。
arg1, arg2, ...：传递给函数的参数。

例如：

const person = {
  name: 'John'
};

function greet(greeting) {
  console.log(`${greeting}, my name is ${this.name}.`);
}

greet.call(person, 'Hello'); // 输出: Hello, my name is John.

此时，call方法将greet函数的this指向指定为person对象，因此this指向person对象，greet函数内部的name属性也指向person对象的name属性。

apply方法

apply方法与call方法类似，但它允许我们传递一个数组作为参数。语法如下：

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

其中：

function：需要改变this指向的函数。
thisArg：指定this指向的对象。
[arg1, arg2, ...]：传递给函数的参数，但必须是一个数组。

例如：

const person = {
  name: 'John'
};

function greet(greeting) {
  console.log(`${greeting}, my name is ${this.name}.`);
}

greet.apply(person, ['Hello']); // 输出: Hello, my name is John.

此时，apply方法将greet函数的this指向指定为person对象，同时将['Hello']数组作为参数传递给greet函数。

call方法与apply方法的区别

虽然call方法和apply方法都可以改变this指向，但它们之间还是存在一些差异。

参数传递方式不同 ：call方法使用逗号分隔的参数列表，而apply方法使用数组作为参数。
数组参数的处理方式不同 ：call方法将数组中的每个元素作为独立的参数传递给函数，而apply方法将数组本身作为函数的唯一参数。
返回结果不同 ：call方法和apply方法都会返回函数的返回值，但call方法会直接返回函数的返回值，而apply方法会将函数的返回值作为数组的第一个元素返回。