再学JS--bind的模拟实现

bind是什么？

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

所有bind函数具有两个特点：

1. 返回一个函数
2. 可以传入参数

var foo = {
    value: 1
}

function bar(){
    console.log(this.value)
}

var bindFoo = bar.bind(foo)
bindFoo()  // 1

第一版模拟实现

Function.prototype.bind2 = function(context) {
    var self = this
    return function() {
        self.apply(context)
    }
}

传参的模拟实现

bind参数需要注意两点：

1. 在bind的时候，是可以进行参数传递
2. 执行bind的返回函数的时候，也是可以进行参数传递的

var foo = {
    value: 1
}

function bar(name,age) {
    console.log(this.value)
    console.log(name)
    console.log(age)
}

var bindFoo = bar.bind(foo, 'kack')
bindFoo(18) // 1  'kack'  18

这种情况下，我们可以使用arguments来进行处理：

Function.prototype.bind2 = function(context) {
    var self = this
    var args = Array.prototype.slice.call(arguments, 1)
    console.log(args)
    return function() {
        var bindArgs = Array.prototype.slice.call(arguments)
        console.log(bindArgs)
        self.apply(context, args.concat(bindArgs))
    }
}

构造函数的模拟效果实现

bind还有一个特点：

一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当做成构造器。提供的this值被忽略，同时调用时的参数被提供给模拟函数。

也就是说当bind返回的函数作为构造函数的时候，bind时指定的this值会失效，但传入的参数依然生效。

var value = 2
var foo = {
    value: 1
}

function bar(name, age) {
    this.habit = 'shopping'
    console.log(this.value)
    console.log(name)
    console.log(age)
}

bar.prototype.friend = 'kevin'
var bindFoo = bar.bind(foo, 'daisy')

var obj = new bindFoo(18)
// undefined
// daisy
// 18

console.log(obj.habit)  //  shopping
console.log(obj.friend)  //  kevin

尽管在全部和foo中都定义了value的值，最后依然返回了undefined，说明绑定的this失效，此时的this已经指向了obj。

Function.prototype.bind2 = function(context) {
    var self = this
    var args = Array.prototype.slice.call(arguments, 1)
    // 考虑到直接修改fbound的prototype，会直接修改原函数的prototype，可以通过一个函数来中转下
    var fNOP = function(){}
    var fbound = function() {
        var bindArgs = Array.prototype.slice.call(arguments)
        // 考虑两种情况
        // 1、作为构造函数时，this指向实例，self指向绑定函数
        // 2、作为普通函数时，this指向window，self指向绑定函数
        self.apply(this instanceof self ? this : context,args.concat(bindArgs))
    }
    // 修改返回函数的prototype为绑定函数的prototype，实例就可以继承函数的原型中的值
    fNOP.prototype = this.prototype
    fbound.prototype = new fNOP()
    return fbound
}

bind函数模拟的优化实现

1. 调用bind的不是函数情况
2. 兼容性处理

最终代码如下：

Function.prototype.bind2 = Function.prototype.bind || function (context) {
    // 兼容性处理
    if(typeof this !== 'function') {
        throw new Error('Function.prototype.bind - what is trying to be bound is not callable')
    }

    var self = this
    var args = Array.prototype.slice.call(arguments, 1)
    // 考虑到直接修改fbound的prototype，会直接修改原函数的prototype，可以通过一个函数来中转下
    var fNOP = function() {}
    var fbound = function () {
        var bindArgs = Array.prototype.slice.call(arguments)
        // 考虑两种情况
        // 1、作为构造函数时，this指向实例，self指向绑定函数
        // 2、作为普通函数时，this指向window，self指向绑定函数
        self.apply(this instanceof self ? this : context, args.concat(bindArgs))
    }
    // 修改返回函数的prototype为绑定函数的prototype，实例就可以继承函数的原型中的值
    fNOP.prototype = this.prototype
    fbound.prototype = new fNOP()
    return fbound
}