前言
上篇文章写的是js的继承，其中就提到了通过调用call实现继承，那么call是怎么做到的了？
call,apply在我们平常的开发中使用的频率不高不低，但是它们却是一个非常重要的知识点
实例
我们通过一个实例来看一下它们的作用
var name = '小明' //这里不能使用let,const因为它们声明的变量没有挂载到window
function fn() {
console.log(this.name)
}
fn() // 小明
const person = {
name: '张三'
}
fn.call(person) // 张三
fn.apply(person) // 张三
从上面代码我们可以得到三条结论
- 调用apply/call方法的时候会立即执行（区别于bind）
- apply/call方法调用者的this会改变指向，上面的例子this从指向window改成指向参数obj
- apply/call的第一个参数对象会暂时生成一个方法，输出结果后被删除
这里面我着重讲一下第三点，其实通过实例已近看的很清楚了，对象person其实是没有打印自己名字的方法的，但是通过apply/call调用后临时生成了一个打印名字方法，获得返回值后，删除掉这个方法，再把返回值return
apply规范
有了上面的理解之后我们再来看一下ES5对apply的描述和规范
当以 thisArg 和 argArray 为参数在一个 func 对象上调用 apply 方法，采用如下步骤：
Function.prototype.apply (thisArg, argArray)
1. 如果 IsCallable(func) 是 false, 则抛出一个 TypeError 异常 .
2. 如果 argArray 是 null 或 undefined, 则返回提供 thisArg 作为 this 值并以空参数列表调用 func 的 [[Call]] 内部方法的结果。
3. 如果 Type(argArray) 不是 Object, 则抛出一个 TypeError 异常 .
4. 令 len 为以 "length" 作为参数调用 argArray 的 [[Get]] 内部方法的结果。
5. 令 n 为 ToUint32(len).
6. 令 argList 为一个空列表 .
7. 令 index 为 0.
8. 只要 index < n 就重复
a. 令 indexName 为 ToString(index).
b. 令 nextArg 为以 indexName 作为参数调用 argArray 的 [[Get]] 内部方法的结果。
c. 将 nextArg 作为最后一个元素插入到 argList 里。
d. 设定 index 为 index + 1.
9. 提供 thisArg 作为 this 值并以 argList 作为参数列表，调用 func 的 [[Call]] 内部方法，返回结果。
apply 方法的 length 属性是 2。
注意： 在外面传入的 thisArg 值会修改并成为 this 值。thisArg 是 undefined 或 null
时它会被替换成全局对象，所有其他值会被应用 ToObject 并将结果作为 this 值，这是第三版引入的更改。
ECMAScript 5.1中文文档
ECMAScript 英文文文档
第四条到第八条我看了一下中文文档没有看懂，去看英文文档也没有看懂，所以就跑去参考了一下大佬的文章，他们也都忽略了，所以我们着重看这几条之外的
实现一下apply
function getWindow(){
return this
}
Function.prototype.newApply = function apply(thisArg,argArray) {
//第一条：如果调用者不是一个方法
if(typeof this !== "function"){
throw new TypeError("调用者不是一个方法")
}
//第二条：判断参数是null或者undefind
if(typeof argArray ==="undefined" || typeof argArray === null){
argArray = []
}
//第三条：判断参数是不是一个对象
if(!(argArray instanceof Object)){
throw new TypeError("参数要是对象")
}
// 在外面传入的 thisArg 值会修改并成为 this 值
if(typeof thisArg === 'undefined' || thisArg === null){
thisArg = getWindow();
}
//参考开篇的案例我们为第一个参数增加一个调用者方法，上述的判断里面this就是调用者，并且是一个方法
let __fn = 'fn'
thisArg[__fn] = this
//第九条：提供 thisArg 作为 this 值并以 argList 作为参数列表，调用 func 的 [[Call]] 内部方法，返回结果
let result = thisArg[__fn](...argArray)
delete thisArg[__fn]
return result
}
测试一下
var name = '小明'
function fn() {
console.log(this.name)
}
const person = {
name: '李四'
}
fn.newApply(person) // 李四
fn.newApply(person) // 李四
当然这个实现比较粗糙，因为我们能取得对象得名字__fn可能与thisArg上面得函数名重复，我们就不再处理了，有兴趣得同学可以自己去试一下ES6得symbol,来改进一下
实现一下 call
Function.prototype.callFn = function call(thisArg){
var argsArray = [];
var argumentsLength = arguments.length;
for(var i = 0; i < argumentsLength - 1; i++){
// argsArray.push(arguments[i + 1]);
argsArray[i] = arguments[i + 1];
}
console.log('argsArray:', argsArray);
return this.applyFn(thisArg, argsArray);
}
call,apply区别
其实call和apply功能完全是一样得
唯一得区别是apply的第二个参数是数组，并且只有两个参数
网友评论