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
下一篇: RocketMQ实现顺序消息
推荐阅读
-
Java类变量和成员变量初始化过程的应用介绍
-
教你用CorelDRAW绘制矩形和方形 矩形工具的使用方法和应用技巧介绍
-
如何使用CorelDRAW为对象填充图案 图案填充的操作方法和应用技巧介绍
-
js中call()和apply()改变指针问题的讲解
-
如何在CorelDRAW中使用渐变填充对象 渐变填充的操作方法和应用技巧介绍
-
c#结构和类的相关介绍
-
Java类变量和成员变量初始化过程的应用介绍
-
call和apply的区别是什么(apply的用法和搭配)
-
浅谈JavaScript中的apply/call/bind和this的使用
-
PHP call_user_func和call_user_func_array函数的简单理解与应用分析