js 关于bind一看秒懂

js中有一个技巧叫做函数绑定，即熟知的bind。以下就一个小demo梳理下原理与简单应用。

// bind的大致原理模拟
const slice=Array.prototype.slice

function bind(fn,context){
  const args=slice.call(arguments,2)
  return function () {
    const innerArgs=slice.call(arguments)
    const finalArgs=args.concat(innerArgs)
    return fn.apply(context,finalArgs)
  }
}

const Anna={
  name:'Anna',
  like:function(hobby,reason){
    console.log(`${this.name} like ${hobby} for ${reason}`)
  }
}

Anna.like('swimming','no reason')//Anna like swimming for no reason
const like=Anna.like
like('running','no reason')//undefined like running for no reason
const Annalike=bind(like,Anna)
Annalike('reading','no reason')//Anna like reading for no reason

//ECMAScript5已经为所有函数定义了一个原生的bind方法，方便调用。
const AnnaOriginLike=Anna.like.bind(Anna)
AnnaOriginLike('shopping','no reason')//Anna like reading for no reason

const AnnaLikeArtsFor=Anna.like.bind(Anna,'arts')
AnnaLikeArtsFor('she like beautiful things')//=>Anna like arts for she like beautiful things

const Jim={name:'Jim'}
jimLikeGameFor=Anna.like.bind(Jim,'playing game')
jimLikeGameFor('no reason')//Jim like playing game for no reason

所以它的用途就是很明显:
可以在特定的this环境中以特定的参数调用另外一个函数;
经常用于一些框架的早期版本，如React中自定义的function经常要保持this一致，使用如fn=fn.bind(this)的方法，后面这中保持this不变的功能逐渐被箭头函数替代。