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

基本语法:

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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值