JS手写bind函数

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方法执行结果返回的是一个未执行的方法，执行时能够继续传入参数，实现了函数的柯里化，提升参数的复用

2、实现过程

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
   }
}

复制代码

3、测试结果

// 测试
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]
复制代码