call() 和 apply() 的相关介绍和应用场景

  • 2019 年 11 月 7 日
  • 笔记

基本语法：

fun.call(thisArg, param1, param2, ...)  fun.apply(thisArg, [param1,param2,...])  fun.bind(thisArg, param1, param2, ...)

返回值

call() 和 apply() 返回函数应该返回的值，bind() 返回一个经过硬绑定的新函数。

参数介绍：

第一个参数为 thisArg，其取值有以下几种情况：

  • 不传/ 传null/ 传undefined：非严格模式下，this 指向 window 对象；严格模式下指向 undefined；
  • 传递基本类型：this 指向其对应的包装对象，如 String、Number、Boolean
  • 传递一个对象：函数中的 this 指向这个对象

第二个参数有以下几种情况：

  • 不传/ 传null/ 传undefined：表示不需要传入任何参数
  • call() 和 bind() 的第二个参数都是参数列表，而 apply() 则是参数数组（或者类数组）—— 尽管如此，在这些参数传递给调用函数时，仍然是以参数列表的形式传递的（这一点很重要）。

执行

call() 和 apply() 一经调用则立即执行函数，而 bind() 则只是完成了函数的 this 绑定。因为函数不会立刻执行，所以适合在事件绑定函数中使用 bind() ，这样既完成了绑定，也确保了仅当事件触发时才执行函数。

应用场景

在这篇文章说过，call()，apply() 和 bind() 都可以改变 this 的指向，什么时候需要改变 this 的指向呢？大部分时候其实是为了借用方法，即在对象上调用其自身不具备的方法。看一下下面的例子：

1.判断数据类型 利用 Object.prototype.toString.call() 可以准确地判断数据类型，如：

var a = "abc";  var b = [1,2,3];  Object.prototype.toString.call(a) == "[object String]" //true  Object.prototype.toString.call(b) == "[object Array]"  //true

原理就是：在任何值上调用 Object 原生的 toString() 方法，都会返回一个格式为 [object NativeconstructorName] 的字符串。据此可以准确判断任何值的数据类型。 既然 Array 和 Function 都继承了 Object 的该方法，为什么不直接在它们身上调用？这是因为 toString() 被重写过了，不是原生方法，因此这里改为调用 Object 的该方法，并将 this 绑定给对应的值。

2.模拟浅拷贝 模拟浅拷贝的过程中，需要剔除原型链上的属性，考虑到源对象可能基于 Object.create() 创建，而这样的对象是没有 hasOwnProperty() 方法的，因此我们不在源对象身上直接调用该方法，而是通过 Object.prototype.hasOwnProperty.call() 的方式去调用，因为 Object 一定是有这个方法的，我们可以借用一下。

if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {      to[nextKey] = nextSource[nextKey];  }

3.继承 JavaScript 的几种继承方式中，有一种就是借用构造函数： 假设有子构造函数 Son 和父构造函数 Parent。对于 Son 而言，其内部的 this 将指向稍后实例化的对象，利用这一点，我们在 Son 的内部通过 call() 或者 apply() 调用 Parent，同时传参 this，这样就可以增强子类实例。

4.类数组借用数组的方法 例如 arguments 是类数组，并不具备数组的 forEach() 方法，那么我们可以通过 call() 调用数组的该方法，同时将方法里面的 this 绑定到 arguments 上：

Array.prototype.forEach.call(arguments,function(item){          console.log(item);      });

5.求数组的最值 核心是 apply() 可用于展开数组，即我们前面说过的将参数数组转化为参数列表。 例如我们要求一个数组的最大值，虽然 Math 对象有 max() 方法，但该方法只接受参数列表。那么这时候，我们可以通过 apply() 去调用该方法，从而展开数组

var arr = [2,3,1,5,4];    Math.max.apply(null,arr);// 5

参考： https://www.cnblogs.com/onepixel/p/6034307.html https://juejin.im/post/5d469e0851882544b85c32ef

VirMach 便宜 VPS

QNews

QNews