浅谈JS中call()和apply()的区别和用途？

最新推荐文章于 2025-04-13 11:16:29 发布

PrinciplesMan

最新推荐文章于 2025-04-13 11:16:29 发布

阅读量1.7k

点赞数 2

文章标签： javascript 前端开发语言

原文链接：https://zhuanlan.zhihu.com/p/414153526

版权

前言：

在JavaScript中，this指向问题一直是一个老生常谈的问题。很多小伙伴应该都知道在js中，this指向哪里通常是在函数调用的时候才确定的，简单来说就是谁调用了函数则this指向谁，当然，这只是狭义的，更加详细的介绍大家可以去看《你不知道的Javascript》这本书。

call()和apply()这两个方法的作用可以简单归纳为改变this指向，从而让我们的this指向不在是谁调用了函数就指向谁。

1.call()和apply()简介

在JavaScript中，每个函数对象都带有call()和apply()方法，即Function.prototype.call()和Function.prototype.apply()，这两个方法都是挂载在原型上的。

MDN官方解释如下：

call：

call() 方法使用一个指定的 this值和单独给出的一个或多个参数来调用一个函数。

apply:

apply()方法调用一个具有给定 this值的函数，以及以一个数组（或类数组对象）的形式提供的参数。

通过官网的解释，大家可能对这两个方法有了一个大致的了解，其实简单来说，call和apply两个方法最主要的作用就是改变this指向。

2. call()和apply()使用方法

call：

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

apply：

func.apply( thisArg, [argsArray])

参数说明：

thisArg：函数在运行时的this值，如果函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象。

arg1, arg2, ...和[argsArray]：函数接收的参数列表。

3.this指向简单示例

代码示例：

<script>
  let obj1 = {
    name: "张三",
    age: 24,
    user: function (args) {
      console.log("姓名：", this.name);
      console.log("年龄：", this.age);
      console.log("参数", args);
    }
  }
  let obj2 = {
    name: "李四",
    age: 30,
    user: function () {
      console.log("姓名：", this.name);
      console.log("年龄：", this.age);
      console.log("参数", args);
    }
  }
  // 正常的调用
  obj1.user('我是参数');
  obj2.user('我是参数');
</script>

输出结果：

输出结果

上段代码中声明了两个对象obj1和obj2，对象中包括了一些常规属性和一个方法属性。然后在最后分别调用了对象中的两个方法，方法中的this指向不出意外的指向了我们的调用者，方法中的name和age就是当前对象中声明的值。

4.使用call()和apply()方法改变this指向

代码示例：

<script>
  let obj1 = {
    name: "张三",
    age: 24,
    user: function (args) {
      console.log("姓名：", this.name);
      console.log("年龄：", this.age);
      console.log("参数", args);
    }
  }
  let obj2 = {
    name: "李四",
    age: 30,
    user: function (args) {
      console.log("姓名：", this.name);
      console.log("年龄：", this.age);
      console.log("参数", args);
    }
  }
  // 正常的调用
  // obj1.user('我是参数');
  // obj2.user('我是参数');

  // 改变this指向
  obj1.user.call(obj2, "我是参数"); // 使用call方法改变
  obj2.user.apply(obj1, ["我是参数"]); // 使用apply方法改变
</script>

输出结果：