JS中的软绑定

JS中的软绑定

什么是软绑定呢

所谓软绑定，是和硬绑定相对应的一个词，在详细解释软绑定之前，我们先来看看硬绑定。在JavaScript中，this的绑定是动态的，在函数被调用的时候绑定，它指向什么完全取决于函数在哪里调用，情况比较复杂，光是绑定规则就有默认绑定、隐式绑定、显式绑定、new绑定等，而硬绑定是显式绑定中的一种，通常情况下是通过调用函数的 apply() 、 call() 或者ES5里提供的 bind() 方法来实现硬绑定的

软绑定的具体实现

在这里，我用的是《你不知道的JavaScript 上》中的软绑定的代码实现：

  if(!Function.prototype.softBind){
        Function.prototype.softBind=function(obj){
            var fn=this;
            var args=Array.prototype.slice.call(arguments,1);
            var bound=function(){
                return fn.apply(
                    (!this||this===(window||global))?obj:this,
                    args.concat.apply(args,arguments)
                );
            };
            bound.prototype=Object.create(fn.prototype);
            return bound;
        };
    }

现在我们来看一下软绑定的效果

function foo() {
        console.log(`name: ${this.name}`);
    }

    let obj = {name: "obj"};
    obj2 = {name: "obj2"};
    obj3 = {name: "obj3"};

    let fooBJ = foo.softBind(obj);
    fooBJ();  // name: obj   这个时候软绑定已经生效了，this绑定到obj上
    obj2.foo = foo.softBind(obj);
    obj2.foo(); //name: obj2   这里已经的this隐式绑定到obj2上了
    fooBJ.call(obj3); // name: obj3  这里this被硬绑定到obj3上了
    setTimeout(obj2.foo, 100); // name: obj
    /*回调函数相当于一个隐式的传参，如果没有软绑定的话，这里将会应用默认绑定将this绑定到全局环境上，
    但有软绑定，这里this还是指向obj1*/

我们可以看到，在第一行时判断函数上是否有softBind属性，如果没有则添加它，然后通过Array.prototype.slice.call(arguments,1)获取传入的外部参数，这里这样做其实为了函数柯里化，也就是说，允许在软绑定的时候，事先设置好一些参数，在调用函数的时候再传入另一些参数（关于函数柯里化大家可以去网上搜一下详细的讲解）最后返回一个bound函数形成一个闭包，这时候，在函数调用softBind()之后，得到的就是bound函数，例如上面的var fooOBJ=foo.softBind(obj1)。

在bound函数中，首先会判断调用软绑定之后的函数（如fooOBJ）的调用位置，或者说它的this的指向，如果!this（this指向undefined）或者this===(window||global)（this指向全局对象），那么就将函数的this绑定到传入oftBind中的参数obj上。如果此时this不指向undefind或者全局对象，那么就将this绑定到现在正在指向的函数（即隐式绑定或显式绑定）。fn.apply的第二个参数则是运行 foo 所需要的参数，由上面的args（外部参数）和内部的arguments（内部参数）连接成，也就是上面说的柯里化。