JavaScript中的call和apply方法详解

JavaScript中的call和apply方法都是函数调用的方法，它们可以将一个函数的执行上下文从一个对象改变到另一个对象。这在很多情况下都非常有用，例如：

• 当你想使用另一个对象的方法时，但又不想改变当前对象时。
• 当你想将一个函数作为另一个函数的参数时。
• 当你想创建一个新的函数，而这个函数的执行上下文是另一个对象时。

call()方法

call()方法的语法如下：

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

其中：

• fun是要调用的函数。
• thisArg是要将fun的执行上下文改变到的对象。
• arg1, arg2, ...是传递给fun的参数。

call()方法的执行过程如下：

1. 将thisArg作为fun的执行上下文。
2. 将arg1, arg2, ...作为fun的参数。
3. 执行fun。

apply()方法

apply()方法的语法如下：

fun.apply(thisArg, args)

其中：

• fun是要调用的函数。
• thisArg是要将fun的执行上下文改变到的对象。
• args是一个数组，包含要传递给fun的参数。

apply()方法的执行过程如下：

1. 将thisArg作为fun的执行上下文。
2. 将args中的元素作为fun的参数。
3. 执行fun。

call()和apply()方法的区别

call()和apply()方法的区别在于传递参数的方式。call()方法的参数是逐个传递的，而apply()方法的参数是作为一个数组传递的。

使用示例

// 使用call()方法调用另一个对象的方法
var obj1 = {
  name: "John",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

var obj2 = {
  name: "Mary"
};

obj1.greet.call(obj2); // 输出: Hello, my name is Mary

// 使用apply()方法调用另一个对象的方法
var obj1 = {
  name: "John",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

var obj2 = {
  name: "Mary"
};

var args = ["Hello", "world"];

obj1.greet.apply(obj2, args); // 输出: Hello, world

// 使用call()方法将一个函数作为另一个函数的参数
function greet(name) {
  console.log("Hello, " + name);
}

function sayHello() {
  greet.call(this, "John");
}

sayHello(); // 输出: Hello, John

// 使用apply()方法将一个函数作为另一个函数的参数
function greet(name) {
  console.log("Hello, " + name);
}

function sayHello() {
  var args = ["John"];

  greet.apply(this, args);
}

sayHello(); // 输出: Hello, John

// 使用call()方法创建一个新的函数
function greet() {
  console.log("Hello, " + this.name);
}

var obj1 = {
  name: "John"
};

var obj2 = {
  name: "Mary"
};

var greetJohn = greet.call(obj1);

greetJohn(); // 输出: Hello, John

var greetMary = greet.call(obj2);

greetMary(); // 输出: Hello, Mary