js手写bind

布满荆棘的人生 2022-05-05 14:58 249阅读 0赞

首先解释一下bind：

> bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN )

给个例子：

var value = 'v in window';
    function func() { 
        console.log(this.value);
    }
    var obj = { 
        value: 'v in obj'
    };
    func(); //v in window
    var newFunc = func.bind(obj);
    newFunc(); //v in obj

用法类似call和apply，调用返回的newFunc函数类似调用func.call(obj)或者func.apply。  
根据这个原理，手写一个bind2：

bind2返回一个函数，调用这个函数时，that指向之前的func，相当于func.apply(obj)，实现了bind功能  
处理一下带参数的情况：

官方bind还有一个特点：

如果给newFunc传参数，他可以把参数拼接起来，修改一下

Function.prototype.bind2 = function (obj) { 
        var that = this;
        var args = [].splice.call(arguments,1);
        return function () { 
            var newArgs = [].splice.call(arguments,0); //将newFunc的参数变成数组
            that.apply(obj,args.concat(newArgs)); //将上面的数组和之前的参数数组结合
        }
    };

处理一下返回的函数被作为构造函数的情况：

Function.prototype.bind2 = function (obj) { 
        var that = this;
        var args = [].slice.call(arguments,1);
        var func =  function () { 
            that.apply(this instanceof func ? this : obj,args.concat([].splice.call(arguments,0))); //用来判断是不是作为构造函数：this instanceof func === true是则是构造函数
        };
        fNOP.prototype = this.prototype; //利用空函数fNOP实现继承原型链同时又不改变原函数的原型链
        fbound.prototype = new fNOP();
        return func;
    };

最后处理一下兼容问题：

Function.prototype.bind2 = function (obj) { 
        if (typeof this !== "function") {  //不是函数不能调用bind方法
          throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
        }
        var that = this;
        var args = [].slice.call(arguments,1);
        var func =  function () { 
            that.apply(this instanceof func ? this : obj,args.concat([].splice.call(arguments,0))); //用来判断是不是作为构造函数：this instanceof func === true是则是构造函数
        };
        fNOP.prototype = this.prototype; //利用空函数fNOP实现继承原型链同时又不改变原函数的原型链
        fbound.prototype = new fNOP();
        return func;
    };