手写call apply bind

青旅半醒 2022-10-30 13:22 8阅读 0赞

故心故心故心故心小故冲啊

--------------------

### 文章目录 ###

*  call
 *  apply
 *  bind

--------------------

# call #

//1.手写步骤
        // 将函数设为对象的属性
        // 执行该函数
        // 删除该函数
        //细节 --参数问题 
        //this == null =>指向的是window
    
        Function.prototype.myCall = function (context) { 
            //细节 --参数问题 //获取参数
            //slice() 用于创建一个包含原有数组中一个或多个元素的新数组，不会影响原始数组 
            var args = [...arguments].slice(1);
            //1.将函数设为对象的属性 this值的是调用的那个函数
            context = context || window; 当context为null时候this指向的是window
            context.fn = this;
            //2.执行该函数 //执行函数的时候吧参数带上
            var result = context.fn(...args);
            //3.删除该函数
            delete context.fn;
            //4.返回这个结果
            return result;
        }

# apply #

跟call差不多 只是apply的第二次参数是数组 所以可以通过arguments\[1\]拿到这个参数

//手写myApply
        Function.prototype.myApply = function (context) { 
        
            let result = null;
            //null的是指指向window
            context = context || window;
            //1.将该函数添加属性
            context.fn = this;
            //2.执行该函数,并带上参数
            // 调用方法
            if (arguments[1]) { 
                result = context.fn(...arguments[1]);
            } else { 
                result = context.fn();
            }
            //3删除该函数这个属性
            delete context.fn();
            //返回结果
            return result;
        }

# bind #

//bind有是三个特点
        //1.返回一个函数
        //2.可以传入参数
        //3.bind 返回的函数作为构造函数的时候，bind 时指定的 this 值会失效，但传入的参数依然生效 =>new的时候this的指向变为obj了
        Function.prototype.myBind = function (context) { 
            // 获取arguments[1]后面的参数
            let args = [...arguments].slice(1);
            let self = this;
    
            //1.返回一个函数
            return function Fn() { 
                return self.apply(
                    // 当作为构造函数时，this 指向实例，此时结果为 true，将绑定函数的 this 指向该实例，可以让实例获得来自绑定函数的值
                    // 以上面的是 demo 为例，如果改成 `this instanceof Fn ? null : context`，实例只是一个空对象，将 null 改成 this ，实例会具有 habit 属性
                    // 当作为普通函数时，this 指向 window，此时结果为 false，将绑定函数的 this 指向 context
                    this instanceof Fn ? this : context,
                    //2.可以传入参数
                    args.concat(...arguments)
                )
                //3.bind 返回的函数作为构造函数的时候，bind 时指定的 this 值会失效，但传入的参数依然生效 =>new的时候this的指向变为obj了 
            }
        }