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

如何给女友讲明白JS的bind模拟实现
文章图片

插曲
周末女友在家学习,突然给我发了一条微信消息,打开一看是模拟实现bind,让我给她讲下~
如何给女友讲明白JS的bind模拟实现
文章图片

讲解
【如何给女友讲明白JS的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多平台发布

    推荐阅读