如何给女友讲明白JS的bind模拟实现

WechatIMG199.jpeg

插曲

周末女友在家学习，突然给我发了一条微信消息，打开一看是模拟实现bind，让我给她讲下~

WechatIMG200.jpeg

讲解

话不多说，开始😃

第一行代码

在函数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()把类数组转成数组
• 数组concat()方法
• 闭包
• apply方法

注：bind在其他场景下的实现有兴趣同学可再去深入探究。