用原生js实现一个bind方法

bind用法介绍：

bind()方法创建一个新的函数, 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。

这段是来自MDN:bind的介绍,我们可以理解bind方法返回一个新的函数，这个函数内部的this指向提供的参数值，来看个例子

 const person = {
      age: 20,
      getAge() {
        return this.age
      }
    }
  const getAge = person.getAge
  console.log(getAge()) // output :undefined

上面代码输出了undefined，什么原因呢？相信大家都知道，getAge()执行时内部的this指向了window,而window并没有age这个属性，我们并没有定义全局的age变量，那我们怎么解决这个问题呢？那就是用哪个bind方法，需要注意的是bind方法的兼容性,IE9以上包括IE9。其他现代浏览器不用说肯定是支持的。下面我们用一下bind方法来修改上面的例子

 const person = {
      age: 20,
      getAge() {
        return this.age
      }
    }
  const getAge = person.getAge.bind(person)
  console.log(getAge()) // output :20

我们看到通过bind方法就可以输出age了

bind语法格式

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

参数

thisArg

当绑定函数被调用时，该参数会作为原函数运行时的 this 指向。当使用new 操作符调用绑定函数时，该参数无效。

arg1, arg2, ...

当绑定函数被调用时，这些参数将置于实参之前传递给被绑定的方法

返回值

返回由指定的this值和初始化参数改造的原函数拷贝

个人理解：bind方法接受的第一个参数是你想绑定的this值，通常是个对象，这个对象在函数内部用this可以获取到，第一个参数后面可以跟若干个参数，这些参数可以在bind的时候传递，相当于预设参数。

好了，知道用法和参数后我们就可以实现一个简陋版的了

Function.prototype.bind=function (context) {
  if(typeof this !=='function'){
    throw new Error(`${this.name} is not a function`)
  }
  const srcFun=this// 保存原始函数
  const arg=Array.prototype.slice.call(arguments,1)// 把arguments类数组转为真实数组
  let noop=function(){}
  const fBound= function () {
   if(this instanceof noop){
     context=this
   }
    // 合并新旧参数
    return srcFun.apply(context,arg.concat(Array.prototype.slice.call(arguments,0)))
  }
  if(this.prototype){
    noop.prototype=this.prototype//维护原型关系，指向原始函数
  }
  fBound.prototype=new noop()//新函数的prototype的__proto__指向noop.prototype
  return fBound
}

很简陋，没有严谨的判断。

一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。

上面是MDN的一段话，也就是bind返回的函数也可以当做构造函数来用，此时bind传递的第一个参数无效，但是其他参数有效。

那么要做判断处理就是

//代码2
if(this instanceof noop){
     context=this
   }

这段代码就可以区分出是在把函数当做构造函数来new了还是当做普通方法来调用了，我们知道
当new 的时候实际做了这点事

var obj={}
obj._proto_=构造函数的prototype
构造函数.call(obj)

所以现在在代码2中的this是构造函数的实例,那就得更改bind后的函数，让bind后的fBound函数的prototype指向noop的实例，这样此时的this就借助noop实例指向了noop的原型，那么this instanceof noop就是true了

总结

上面是我对bind方法的一些理解和实现，仅供参考和学习。bind方法在react中会比较常用到，有些面试题也会让自己实现一个，所以尝试一下也能学到不少东西了。