Javascipt的call和apply的区别 ?

参考回答

callapply 都是 JavaScript 函数的内置方法,用于改变函数的 this 上下文并调用该函数。它们的功能非常相似,主要区别在于传递参数的方式。

  • call():调用函数时,接受的参数是按顺序传递的单独的参数。
  • apply():调用函数时,接受的参数是一个数组(或类数组对象)。

详细讲解与拓展

1. call()

call() 方法调用一个函数,并且允许你指定 this 的值,后续的参数会依次传递给函数。

语法:
func.call(thisArg, arg1, arg2, ...);
  • thisArg:函数执行时使用的 this 值。
  • arg1, arg2, ...:传递给函数的参数,按顺序传递。
例子:
function greet(name, age) {
  console.log(`Hello, {name}. You are{age} years old.`);
}

greet.call(null, 'Alice', 30);  // Output: Hello, Alice. You are 30 years old.

在这个例子中,call 方法传递了两个参数 'Alice'30,它们作为 greet 函数的参数。

2. apply()

apply() 方法也用于调用函数并改变 this,不过它接受的是一个数组或类数组对象作为参数。

语法:
func.apply(thisArg, [argsArray]);
  • thisArg:函数执行时使用的 this 值。
  • argsArray:一个数组或类数组对象,包含传递给函数的参数。
例子:
function greet(name, age) {
  console.log(`Hello, {name}. You are{age} years old.`);
}

greet.apply(null, ['Bob', 25]);  // Output: Hello, Bob. You are 25 years old.

在这个例子中,apply 方法接受了一个数组 ['Bob', 25],并将这些参数传递给 greet 函数。

3. 区别总结

特性 call() apply()
参数传递方式 依次传递单独的参数 传递一个包含所有参数的数组或类数组对象
使用场景 当你已经知道参数,并且可以逐个传递它们时使用 当参数数量不固定,或已经有一个数组传递时使用

4. 常见的应用场景

  • call():用于当我们有明确的参数时,可以直接逐个传递。例如,手动控制函数的上下文并传递多个已知的参数。
    function sum(a, b) {
    return a + b;
    }
    console.log(sum.call(null, 5, 3));  // Output: 8
    
  • apply():当我们有一个参数数组时,使用 apply 会非常方便。例如,合并两个数组的求和。
    function sum() {
    return Array.from(arguments).reduce((acc, current) => acc + current, 0);
    }
    console.log(sum.apply(null, [1, 2, 3, 4]));  // Output: 10
    

5. 扩展:callapply 的共同应用

  • 这两个方法都可以用来借用方法(比如实现继承),比如将一个对象的方法借用到另一个对象上。
    const person = {
    name: 'Alice',
    greet: function() {
      console.log(`Hello, ${this.name}!`);
    }
    };
    
    const anotherPerson = { name: 'Bob' };
    
    person.greet.call(anotherPerson);  // Output: Hello, Bob!
    

总结

  • call():用于按顺序传递多个参数给函数。
  • apply():用于将参数作为数组传递给函数。

这两者的主要区别在于参数传递方式,call 是逐个传递参数,而 apply 是传递一个数组或类数组对象。

发表评论

后才能评论