手动实现JS bind()

bind可以干什么

使用了bind会创建一个新函数（绑定函数），当这个新函数被调用时，它的 this 值是传递给 bind() 的第一个参数, 它的参数是 bind() 的其他参数和新函数的参数。
语法：

fun.bind(thisArg[, arg1[, arg2[, ...]]])

• thisArg 当绑定函数被调用时，该参数会作为原函数运行时的 this 指向。当使用 new 操作符调用绑定函数时，该参数无效。
• arg1, arg2, … （可选）当绑定函数被调用时，这些参数加上绑定函数本身的参数会按照顺序作为原函数运行时的参数。

使用介绍

//js提供的bind方法可以在函数运行之前就绑定其作用域，修改如下

const id = 'window';
function test () {
    console.log(this.id)
}

const fn = test.bind(window);
const obj = {
    id: 'obj',
    hehe:fn
};

fn();// window
obj.hehe(); // window

但是bind方法在低版本浏览器不兼容，这里我们可以手动实现一下

拆分思路

1.bind会返回一个新函数，所以

return function(){

}

2.目标是当这个新函数被调用时，它的 this 值是传递给 bind() 的第一个参数, 它的参数是 bind() 的其他参数以及新函数传来的参数。

实现代码

Function.prototype.testBind = function(that){
  
    const arr = Array.prototype.slice.apply(arguments,[1]);
  
    const _this = this;
    
  
  return function(){
    //目的：让this指向obj,参数第一个就是{value2:'also ok'},第二个是“hello bind”
    _this.apply(that,arr.concat(Array.prototype.slice.call(arguments)));
  }
    
}

测试

var test = function(a,b){
    console.log('作用域绑定 '+ this.value)
    console.log('testBind参数传递 '+ a.value2)
    console.log('调用参数传递 ' + b)
}
    
var obj = {
    value:'ok'
}
var fun_new = test.testBind(obj,{value2:'also ok'})

fun_new ('hello bind');

每天都努力一点点
谢谢你看完

---