前言
call/apply
的核心理念就是借用方法。
这话乍一听上去,感觉有点云里雾里。讲一个生活中的实例来描述一下:
老邓和老王是邻居,老邓家有火锅,老王家有烧烤架。老王家很少吃火锅,但突然有一天想吃火锅,他就可以去老邓家借用火锅,这样老王家不仅吃上了火锅,还没花买锅的钱。同样如果有一天老邓家想吃烧烤,也可以去老王家借烧烤架。
call/apply
做的便是类似的事,A
对象上实现了一个方法,B
对象由于一些需求,也需要调用同样的方法,最优的方法肯定是B
直接去调用A
对象的方法,自身无需扩展。
基本介绍
语法
fn.call(thisArg, arg1, arg2,...) fn.apply(thisArg, [arg1, arg2,...]) 复制代码
参数
thisArg
(可选):
fn
函数的this
指向thisArg
thisArg
传入null,undefined
:非严格模式下:fn函数this->window
;严格模式:this->undefined
- 值为原始值(数字,字符串,布尔)时,this指向包装类
arg1,arg2
(可选): 传给fn的参数
- apply传递的第二个参数为数组
作用
改变this
指向
常见用法
判断数据类型
typeof
方法只返回七种值:string、number、boolean、undefined、object、function、symbol
。使用typeof
是无法区分array
和普通对象的。
arr = [] typeof(arr) // "object" obj = {} typeof(obj) // "object" 复制代码
Object.prototype.toString
方法可以准确判断所有的类型,Array、String
等都重写了该方法,因此就需要借助call/apply
来调用Object.ptototype
上的方法。
// 通过返回值的不同,就可以区分开对象与数组 Object.prototype.toString.call(arr) // "[object Array]" Object.prototype.toString.call(obj) // "[object Object]" 复制代码
类数组调用数组的方法
ES6
未发布之前,没有Array.from
方法可以将类数组转为数组,需要借助数组的slice方法将类数组转化为数组。
Array.prototype.slice.call(arguments) [].slice.call(arguments) 复制代码
当然别的数组方法也可以类似借用,例如push
方法:
var arraylike = { 0: 1, length: 1 } Array.prototype.push.call(arrlike, 1) // {0: 1, 1: 2, length: 2} 复制代码
apply
求数组的最大值与最小值
JavaScript
中没有给数组提供类似max
和min
函数,只提供了Math.max/min
,用于求多个数的最值,可以借助apply
方法,直接传递数组给Math.max/min
const arr = [1,10,11,33,4,52,17] Math.max.apply(null, arr) Math.min.apply(null, arr) 复制代码
手撕call
初步模拟
首先看一个简单例子,分析一下call
函数执行过程:
var obj = { value: 1 } function fun() { console.log(this.value) } fun.call(obj) // 1 复制代码
可见call
函数调用执行了两部:
call
改变了this
指向,将this->obj
fun
函数执行
那该如何模拟上面的效果那?
fun
的this
指向obj
,说明func
的执行方式为obj.func
形式,因此在obj
上定义函数fun
,再执行obj.fun()
即可。
所以call
的模拟思想为下面三步:
- 将函数
fn
设为thisArg
的对象的方法 - 执行
thisArg.fn
- 删除该函数
Function.prototype.myCall = function (thisArg) { // this为调用myCall的函数 thisArg.func = this; thisArg.func(); delete(thisArg.func); } 复制代码
完善
上面实现了call
的初步模拟,还有几个地方有待解决:
- 未传入
thisArg
参数:当未传入thisArg
或传入null
时,函数的this->window
thisArg = thisArg || window 复制代码
- 传入
arg1,arg2
等参数时:ES6可以通过rest
参数来实现,ES6以前可以通过遍历arguments
来实现
// ES5 const args = [] for (let i = 1; i<arguments.length; i++) { args.push('argumens['+ i + ']') } eval('thisArg.func(' + args +')') 复制代码
eval()
函数计算JavaScript
字符串,并把它作为脚本代码来执行。array
在与字符串相加时,会调用array.toString
方法([1,2,3].toString() // "1,2,3"
)。
- 函数可以拥有返回值
举个例子:
const obj = { value: 1 } function func(name, age) { return { name, age, value: this.value } } func.call(obj, 'zcxiaobao', 24) // { // age: 24, // name: "zcxiaobao", // value: 1, // } 复制代码
这很好解决,只需将eval
执行之后的结果返回即可。
接着我们来看一下完整版的代码:
Function.prototype.myCall = function (thisArg) { thisArg = thisArg || window; thisArg.func = this; const args = [] for (let i = 1; i<arguments.length; i++) { args.push('arguments['+ i + ']') } const result = eval('thisArg.func(' + args +')') delete thisArg.func; return result; } 复制代码
使用ES6
语法进行模拟代码会简单很多
Function.prototype.myCall = function (thisArg, ...args) { thisArg = thisArg || window; thisArg.func = this; args = args || [] const result = thisArg.func(..args) delete thisArg.func; return result; } 复制代码
手撕apply
apply
的代码实现与call
类似,这不做过多赘述。
Function.prototype.myApply = function (thisArg, arr) { thisArg = thisArg || window; thisArg.func = this; const args = [] for (let i = 0; i<arr.length; i++) { args.push('arr['+ i + ']') } const result = eval('thisArg.func(' + args +')') delete thisArg.func; return result; }