乐趣区

关于程序员:如何给女友讲明白JS的bind模拟实现

jiezi

插曲

周末女友在家学习，忽然给我发了一条微信音讯，关上一看是模仿实现 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 多平台公布

退出移动版