一、题目
- 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
}
复制代码