bind的模拟实现

apply

apply的方法和 call 方法的实现类似，只不过是如果有参数，以数组形式进行传递，直接上代码：

Function.prototype.apply2 = function(context) {
    var context = context || window
    context.fn = this // this 也就是调用apply的函数
    var result
    // 判断是否有第二个参数
    if(arguments[1]) {
        result = context.fn(...arguments[1])
    } else {
        result = context.fn()
    }
    delete context.fn()
    return result
}

var foo = {
    value: 1
}
function bar(name, age) {
    console.log(name)
    console.log(age)
    console.log(this.value);
}
bar.apply2(foo, ['black', '18']) // black 18 1

bind

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

也就是说bind可以返回一个函数，并且可以传入参数。

首先根据第一点，需要返回一个函数：

Function.prototype.bind2 = function(context) {
    var self = this
    return function() {
        self.apply(context)
    }
}
var foo = {
    value: 1
};

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

var bindFoo = bar.bind2(foo); 
bindFoo() // 1

接下来还有第二点，可以传入参数，可是传参数还会有两种情况，是在bind的时候传参数呢，还是在调用返回的函数的时候传参数呢？

var foo = {
    value: 1
};

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

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

通过上面的例子就可以明显发现。两种方式都可以传参。那模拟实现：

Function.prototype.bind2 = function(context) {
    var self = this
    var args = [...arguments].slice(1)
    console.log([...arguments])
    return function() {
        // 这个时候的arguments指调用的时候传入的参数
        self.apply(context, args.concat([...arguments]))
    }
}

var foo = {
    value: 1
};

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

var bindFoo = bar.bind2(foo, 'black');
bindFoo('18')

这两点完成后，还有一个特点，就是一个绑定函数也能使用new操作符创建对象，提供的this值被忽略，同时调用时的参数被提供给模拟函数。

也就是说 bind 返回的函数作为构造函数的时候，bind 时指定的 this 值会失效，但是传入的参数依然生效，举个例子来说明：

var value = 2;
var foo = {
    value: 1
}
function bar(name, age) {
    console.log(name)
    console.log(age)
    console.log(this.value)
}

bar.prototype.sex = 'boy'
var bindFoo = bar.bind(foo, 'black')
var obj = new bindFoo('18')
// black
// 18
// undefined
console.log(obj.sex) // boy

尽管在全局和 foo 中都声明了 value 值，最后依然返回 undefined，那是因为当调用obj的时候，这个时候的this指向已经指向到了 obj

所以我们要去修改一下返回函数的原型来去实现：

Function.prototype.bind2 = function(context) {
    var self = this;
    var args = [...arguments].slice(1)
    
    var fun = function() {
        // 当作为构造函数的时候，this 指向实例， self指向绑定函数，由fun.prototype = this.prototype, 使 fun.prototype 为 绑定函数的 prototype，此时结果为true，所以this指向实例
        // 作为普通函数时，this 指向window， self 指向绑定函数，此时结果为false，此时this指向绑定的context
        self.apply(this instanceof self ? this : context,args.concat(...arguments))
    }
    // 修改返回函数的 prototype 为绑定函数的 prototype，实例就可以继承函数的原型中的值
    // 使用Object.create避免修改函数的prototype
    fun.prototype = Object.create(this.prototype)
    return fun
}

最后加个对调用bind是否是个函数的判断：

Function.prototype.bind2 = function(context) {
    if(typeof this !== 'function') {
        throw new TypeError('Error')
    }
    var self = this;
    var args = [...arguments].slice(1)
    
    var fun = function() {
        // 当作为构造函数的时候，this 指向实例， self指向绑定函数，由fun.prototype = this.prototype, 使 fun.prototype 为 绑定函数的 prototype，此时结果为true，所以this指向实例
        // 作为普通函数时，this 指向window， self 指向绑定函数，此时结果为false，此时this指向绑定的context
        self.apply(this instanceof self ? this : context,args.concat(...arguments))
    }
    // 修改返回函数的 prototype 为绑定函数的 prototype，实例就可以继承函数的原型中的值
    // 使用Object.create避免修改函数的prototype
    fun.prototype = Object.create(this.prototype)
    return fun
}