bind

官方形貌

bind() 函数会建立一个新函数（称为绑定函数），新函数与被调函数（绑定函数的目的函数）具有雷同的函数体（在 ECMAScript 5 范例中内置的call属性）。当目的函数被挪用时 this 值绑定到 bind() 的第一个参数，该参数不能被重写。绑定函数被挪用时，bind() 也接收预设的参数供应给原函数。一个绑定函数也能运用new操纵符建立对象：这类行动就像把原函数当做组织器。供应的 this 值被疏忽，同时挪用时的参数被供应给模仿函数。

运用引见

由于javascript中作用域是由其运转时刻所处的环境决议的，所以每每函数定义和现实运转的时刻所处环境不一样，那末作用域也会发生响应的变化。
比方下面这个状况：

var id = 'window';
//定义一个函数，然则不马上实行
var test = function(){
    console.log(this.id)
}
test() // window
//把test作为参数通报
var obj = {
    id:'obj',
    hehe:test
}
//此时test函数运转环境发生了转变
obj.hehe() // 'obj'
//为了防止这类状况，javascript内里有一个bind要领能够在函数运转之前就绑定其作用域，修正以下

var id = 'window';
var test = function(){
    console.log(this.id)
}.bind(window)
var obj = {
    id:'obj',
    hehe:test
}
test() // window
obj.hehe() // window

上面引见了bind要领的一个重要作用就是为一个函数绑定作用域，然则bind要领在低版本浏览器不兼容，这里我们能够手动完成一下。

拆分一下症结思绪

1. 由于bind要领不会马上实行函数，须要返回一个待实行的函数（这里用到闭包，能够返回一个函数）return function(){}

2. 作用域绑定，这里能够运用apply或许call要领来完成 xx.call(yy)/xx.apply(yy)

3. 参数通报，由于参数的不肯定性，须要用apply通报数组（实例更清楚明了）xx.apply(yy,[...Array...])，假如用call就不太方便了，由于call背面的参数须要一个个列出来

完成

有了上述的思绪，大抵的雏形已清楚明了了，代码应当也很轻易完成

绑定作用域，绑定传参

Function.prototype.testBind = function(that){
    var _this = this,
        /*
        *由于参数的不肯定性，统一用arguments来处置惩罚，这里的arguments只是一个类数组对象，有length属性
        *能够用数组的slice要领转化成规范花样数组，除了作用域对象that之外，
        *背面的一切参数都须要作为数组参数通报
        *Array.prototype.slice.apply(arguments,[1])/Array.prototype.slice.call(arguments,1)
        */
        slice = Array.prototype.slice,
        args = slice.apply(arguments,[1]);
    //返回函数    
    return function(){
        //apply绑定作用域，举行参数通报
        return _this.apply(that,args)
    }    
}

测试

var test = function(a,b){
    console.log('作用域绑定 '+ this.value)
    console.log('testBind参数通报 '+ a.value2)
    console.log('挪用参数通报 ' + b)
}
var obj = {
    value:'ok'
}
var fun_new = test.testBind(obj,{value2:'also ok'})

fun_new ('hello bind')
// 作用域绑定 ok
// testBind参数通报 also ok
// 挪用参数通报  undefined

动态参数

上面已完成了bind要领的作用域绑定，然则美中不足的是，既然我们返回的是一个函数，挪用的时刻应当支撑通报参数，很显然，上面的 fun_new 挪用的时刻并不支撑传参，只能在 testBind 绑定的时刻通报参数，由于我们终究挪用的是这个返回函数

function(){
        return _this.apply(that,args)
    }    

这内里的args在绑定的时刻就已肯定了，挪用的时刻值已牢固，
我们并没有处置惩罚这个function通报的参数。

我们对其举行革新

return function(){
        return _this.apply(that,
            args.concat(Array.prototype.slice.apply(arguments,[0]))
        )
    }    

这里的 Array.prototype.slice.apply(arguments,[0]) 指的是这个返回函数实行的时刻通报的一系列参数，所以是从第一个参数最先 [0] ,之前的args = slice.apply(arguments,[1])指的是 testBind要领实行时刻通报的参数，所以从第二个最先 [1]，两则有本质区别，不能搞混，只要二者兼并了以后才是返回函数的完全参数

所以有以下完成

Function.prototype.testBind = function(that){
    var _this = this,
        slice = Array.prototype.slice,
        args = slice.apply(arguments,[1]);
    return function(){
        return _this.apply(that,
                    args.concat(Array.prototype.slice.apply(arguments,[0]))
                )
    }    
}

测试

var test = function(a,b){
    console.log('作用域绑定 '+ this.value)
    console.log('testBind参数通报 '+ a.value2)
    console.log('挪用参数通报 ' + b)
}
var obj = {
    value:'ok'
}
var fun_new = test.testBind(obj,{value2:'also ok'})

fun_new ('hello bind')
// 作用域绑定 ok
// testBind参数通报 also ok
// 挪用参数通报  hello bind

在以上2种传参体式格局中，bind的优先级高，从 args.concat(Array.prototype.slice.apply(arguments,[0])) 也能够看出来，bind的参数在数组前面。

原型链

官方文档上有一句话:

A bound function may also be constructed using the new operator: doing
so acts as though the target function had instead been constructed.
The provided this value is ignored, while prepended arguments are
provided to the emulated function.

申明绑定事后的函数被new实例化以后，须要继续原函数的原型链要领，且绑定过程当中供应的this被疏忽（继续原函数的this对象），然则参数照样会运用。
这里就须要一个中转函数把原型链通报下去

fNOP = function () {} //建立一个中转函数
fNOP.prototype = this.prototype;
xx.prototype = new fNOP() 
修正以下
Function.prototype.testBind = function(that){
    var _this = this,
        slice = Array.prototype.slice,
        args = slice.apply(arguments,[1]),
        fNOP = function () {},
        //所以挪用官方bind要领以后 有一个name属性值为 'bound '
        bound = function(){
            return _this.apply(that,
                args.concat(Array.prototype.slice.apply(arguments,[0]))
            )
        }    

    fNOP.prototype = _this.prototype;

    bound.prototype = new fNOP();

    return bound;
}

而且bind要领的第一个参数this是能够不传的，须要分2种状况

• 直接挪用bind以后的要领

var f = function () { console.log('不传默以为'+this)  };f.bind()()
// 不传默以为 Window 

所以直接挪用绑定要领时刻 apply(that, 发起改成 apply(that||window,，实在不改也能够，由于不传默许指向window

• 运用new实例化被绑定的要领

轻易懵懂，重点在于弄清楚规范的bind要领在new的时刻做的事变，然后就能够清楚的完成

这里我们须要看看 new 这个要领做了哪些操纵 比如说 var a = new b()

1. 建立一个空对象 a = {}，而且this变量援用指向到这个空对象a

2. 继续被实例化函数的原型 ：a.__proto__ = b.prototype

3. 被实例化要领b的this对象的属性和要领将被到场到这个新的 this 援用的对象中： b的属性和要领被到场的 a内里

4. 新建立的对象由 this 所援用 ：b.call(a)

经由过程以上能够得知，假如是var after_new = new bindFun(); 由于这类行动是把原函数当做组织器，那末那末终究实例化以后的对象 this须要继续自原函数, 而这里的 bindFun 现在是

function(){
            return _this.apply(that || window,
                args.concat(Array.prototype.slice.apply(arguments,[0]))
            )
        }    

这里apply的作用域是绑定的that || window，在实行 testBind()的时刻就已牢固，并没有把原函数的this对象继续过来，不符合我们的请求，我们须要依据apply的特征处理这个题目：

在一个子组织函数中，你能够经由过程挪用父组织函数的 `apply/call` 要领来完成继续

比方

function Product(name, price) {
  this.name = name;
  this.price = price;

  if (price < 0) {
    throw RangeError('Cannot create product ' +
                      this.name + ' with a negative price');
  }
}

function Food(name, price) {
  Product.call(this, name, price); 
  this.category = 'food';
}

//等同于（实在就是把Product放在Food内部实行了一次）
function Food(name, price) { 
    this.name = name;
    this.price = price;
    if (price < 0) {
        throw RangeError('Cannot create product ' +
                this.name + ' with a negative price');
    }

    this.category = 'food'; 
}

所以在new新的实例的时刻及时将这个新的this对象 举行 apply 继续原函数的 this 对象，就能够到达 new 要领内里的第 3 步的效果

apply(that||window,
//修正为 假如是new的状况，须要绑定new以后的作用域，this指向新的实例对象
apply(isNew ?　this : that||window,  ==>

Function.prototype.testBind = function(that){
    var _this = this,
        slice = Array.prototype.slice,
        args = slice.apply(arguments,[1]),
        fNOP = function () {},
        //所以挪用官方bind要领以后 有一个name属性值为 'bound '
        bound = function(){
            return _this.apply(isNew ?　this : that||window,
                args.concat(Array.prototype.slice.apply(arguments,[0]))
            )
        }    

    fNOP.prototype = _this.prototype;

    bound.prototype = new fNOP();

    return bound;
}

这里的 isNew 是辨别 bindFun 是直接挪用照样被 new 以后再挪用，经由过程原型链的继续关联能够晓得，
bindFun 属于 after_new的父类，所以 after_new instanceof bindFun 为 true,同时
bindFun.prototype = new fNOP() 原型继续; 所以 fNOP 也是 after_new的父类， after_new instanceof fNOP 为 true

终究效果

Function.prototype.testBind = function(that){
        var _this = this,
            slice = Array.prototype.slice,
            args = slice.apply(arguments,[1]),
            fNOP = function () {},
            bound = function(){
                //这里的this指的是挪用时刻的环境
                return _this.apply(this instanceof  fNOP ?　this : that||window,
                    args.concat(Array.prototype.slice.apply(arguments,[0]))
                )
            }    
        fNOP.prototype = _this.prototype;
    
        bound.prototype = new fNOP();
    
        return bound;
    }

我看到有些处所写的是

this instanceof fNOP && that ? this : that || window,

我个人以为这里有点不正确，假如绑定时刻不传参数，那末that就为空，那无论怎样就只能绑定 window作用域了。

以上是个人见解，不对的处所望指点，感谢！