模拟实现call/apply

前言

上篇文章写的是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的第二个参数是数组，并且只有两个参数