JS实现【call、apply、bind】源码封装——带注释全解

call

  function demo(a,b,c){
            this.a=a;
            this.b=b;
            // console.log(...arguments);
            console.log(this);
        }
        let obj={
            name:'1',
            age:2,
        }
        // 在Function原型上添加一个myCall方法，目的是为了我创建其它自定义函数时，可以跟call方法一样调用
        Function.prototype.myCall=function(){
            // 定义一个变量赋值为函数的第一个参数指向=>把当前作用域中的this作为函数第一个参数的指向   ||表示短路运算
            let target = arguments[0]||window;//判断target的指向
            // 把伪数组转为真数组
            let _arg=Array.from(arguments).splice(1);
            // let _arg=Array.prototype.slice.call(arguments);
            // 在myCall的第一个参数中创建一个存储this指向的fn方法
            target.fn=this;
            // 将arguments中的参数全部指向target=>也就是myCall的第一个调用的实参
            target.fn(..._arg);
        }
        demo.myCall(obj)

apply 

        function demo(a,b,c){
            this.a=a;
            this.b=b;
            // console.log(...arguments);
            console.log(this);
        }
        let obj={
            name:'1',
            age:2,
        }

// 在Function原型上添加一个myCall方法，目的是为了我创建其它自定义函数时，可以跟call方法一样调用
            Function.prototype.myApply=function(){
            // 定义一个变量赋值为函数的第一个参数指向=>把当前作用域中的this作为函数第一个参数的指向   ||表示短路运算
            let target = arguments[0]||window;//判断target的指向
            // 定义一个变量作为接收maApply方法的第二个参数,且第二个参数以数组的形式接实参;[1]=>就是一个伪数组，里面包含多个实参
            let _arg=arguments[1];
            // 在myCall的第一个参数中创建一个存储this指向的fn方法
            target.fn=this;
            // 将arguments中的参数全部指向target=>也就是myCall的第一个调用的实参
            target.fn(..._arg);
        }
        demo.myApply(obj,[1,2,3])

bind 

        function demo(a,b,c){
            this.a=a;
            this.b=b;
            // console.log(...arguments);
            console.log(this);
        }
        let obj={
            name:'1',
            age:2,
        }
// 在Function原型上添加一个myBind的方法，目的是为了实现跟Function原型bind一样的调用方法
        Function.prototype.myBind=function(){
            // 定义一个变量赋值为函数的第一个参数指向=>也就是把当前作用域中的this指向作为函数第一个参数的指向
            let target=arguments[0] || window;//判断第一个参数的指向
            // 定义一个变量截取函数第一个参数转为真数组形式
            let _arg=Array.from(arguments).splice(1);
            // 定义一个变量保存当前作用域下的this指向，目的是为了引用到最终函数的this指向=>谁调用此方法就指向谁
            let that=this;
            // 返回一个新函数到外部形成闭包，目的是为了实现上文this永久指向当前新函数指向且能实现新函数多种实参传递效果=>拼接myBind实参和返回一个新函数的实参方式
            return function(){
                // 定义一个变量作为当前函数参数的集合以真数组形式实现
                let arg=Array.from(arguments);
                // 在myBind方法里创建一个fn方法,目的是为了把myBind函数的指向引用到当前函数中，最终引用到调用此方法的函数中
                target.fn=that;
                // 拼接myBind实参和返回新函数的实参，且最终展开数组里所有的参数
                target.fn(...(_arg.concat(arg)))
            }
        }
        let fn=demo.myBind(obj,);
        fn(1)