一、题目

• 1、已知 ES5 中 func.bind(context, 1, 2)(3, 4) 等价于 func.call(context, 1, 2, 3, 4) 请用 ES3 实现一个 bind 的 polyfill

在前端的面试中，经常会问到call, apply, bind方法的区别？

• call: fn.call(context, 1, 2, 3, 4)
• apply: fn.apply(context, [1, 2, 3, 4])
• bind: fn.bind(context, 1, 2)(3, 4)

context为this的指向, 以上三种方法执行的结果一致，call、apply两者的区别就是传参方式的不同，而bind方法执行结果返回的是一个未执行的方法，执行时可以继续传入参数，实现了函数的柯里化，提高参数的复用

二、实现过程

Function.prototype.myBind = function (context = window) { // 原型上添加mybind方法
   // var args = Array.from(arguments) // 类数组转数组(es6) console.log(args instanceof Array)
   var argumentsArr = Array.prototype.slice.call(arguments) // 类数组转数组
   var args = argumentsArr.slice(1) // 后面的参数
   var self = this // 调用的方法本身
   return function () { // 返回一个待执行的方法
       var newArgs = Array.prototype.slice.call(arguments) // 返回函数的arguments,类数组转数组或者使用es6解构赋值
       self.apply(context, args.concat(newArgs)) // 合并两args
   }
}

复制代码

三、测试结果

//  测试
var name = 'window name'
var obj = {
    name: 'obj name',
}
var fn = function () {
    console.log(this.name, [...arguments])
}
fn(1, 2, 3, 4) // 直接执行，this指向window
fn.myBind(obj, 1, 2)(3, 4) // mybind改变this指向
fn.bind(obj, 1, 2)(3, 4) // 原生bind

// 以上执行结果如下：
// window name [1, 2, 3, 4]
// obj name [1, 2, 3, 4]
// obj name [1, 2, 3, 4]
复制代码

修改一下, 当使用new操作函数时候,保证this的指向, 原型链也关联上

Function.prototype.MyBind = function(context){
    var self = this
    var args = Array.prototype.slice.call(arguments, 1)
    var temp = function () {}
    var fn = function () {
        var newArgs = Array.prototype.slice.call(arguments)
        // 如果被new调用，this应该是fn的实例
        return self.apply(this instanceof fn ? this : (context || window), args.concat(newArgs) )
    }
    // 维护fn的原型
    temp.prototype = self.prototype
    fn.prototype = new temp()
    return fn
}
复制代码