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不变的功能逐渐被箭头函数替代。