插曲

周末女友在家学习,忽然给我发了一条微信音讯,关上一看是模仿实现bind,让我给她讲下~

解说

话不多说,开始

第一行代码

在函数Function的原型prototype上挂载一个bind2办法

Function.prototype.bind2 = function(context) {}

第二行代码

把this赋值给self,次要是为前面执行apply的时候,self指向的是bind2的调用者

var self = this;

第三行代码

应用Array.prototype.slice.call()办法把arguments这个类数组从1开始,也就是第2项到尾部的参数转换成数组,有同学可能会纳闷为何不是第1项开始,因为第一项个别是一个对象,图中是context这个入参,这个入参在最初apply时用
其实这里的self和args在上面return的函数中用到会产生闭包

var args = Array.prototype.slice.call(arguments, 1);

第四行代码

返回一个函数

return function() {}

第五行代码

同第二行代码相似,这里省略没写第二个入参其实是从首项开始到开端

var bindArgs = Array.prototype.slice.call(arguments);

第六行代码

执行apply办法扭转函数内this的指向到context,两次传入的函数的参数合并,为何要合并参数,因为bind应用时首次返回的是一个函数,再执行这个函数,可比照apply/call的应用;这里还波及内层函数援用内部变量,也就是常常说的闭包。

self.apply(context, args.concat(bindArgs));

举个例子:

var obj = {  type: 'car'};function factory(brand, color) {  console.log('商品类型:', this.type) // 商品类型: car  console.log('商品品牌:', brand) // 商品品牌: BMW  console.log('商品色彩:', color) // 商品色彩: red}var product = factory.bind2(obj, 'BMW');product('red')

至此,解说结束,女友示意明确了,持续致力

小彩蛋

⭐ 知识点梳理:

  • 原型prototype上挂载办法
  • this指向
  • Array.prototype.slice.call()把类数组转成数组
  • 闭包
  • apply办法

注:bind在其余场景下的实现有趣味同学可再去深刻探索。

本文由mdnice多平台公布