博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
详解bind
阅读量:6956 次
发布时间:2019-06-27

本文共 5040 字,大约阅读时间需要 16 分钟。

本文主要详细分解bind函数的polyfill实现。

觉得还行的老板们可以给个gayhub的satr:

一:bind基础

bind函数的具体功能与apply,call函数相似都是改变函数体内的this对象,也就是扩充函数作用域。在中是这样介绍bind的

bind()方法创建一个新的函数, 当这个新函数被调用时其this置为提供的值,其参数列表前几项置为创建时指定的参数序列。

由上可知,bind函数和apply,call函数不同在于bind函数执行后返回的是一个绑定了this对象的函数,而apply和call函数是直接执行

下面我们来看一个简单的例子用来说明apply,call和bind的区别: 例 1:

var x = 'out'var a = {  x:'inner',  func:function(){    console.info('现在的所在的环境是',this.x)  }}var b = a.func// innerb.apply(a) // 现在的所在的环境是innerb.call(a) // 现在的所在的环境是innerb.bind(a) // 没有输出因为bind函数返回的是一个新的函数typeof b.bind(a) === 'function' // trueb.bind(a)() // 现在的所在的环境是inner复制代码

因此bind函数可以异步执行,这是它区别于apply和bind的主要地方。

二:详解polyfill

bind方法是ECMAScript 5才加入的新方法,因此存在着浏览器兼容性问题,在具体执行中最好加入polyfill增加兼容性。在MDN的是这样的

if (!Function.prototype.bind) {  Function.prototype.bind = function(oThis) {    if (typeof this !== 'function') {      // closest thing possible to the ECMAScript 5      // internal IsCallable function      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');    }        var aArgs   = Array.prototype.slice.call(arguments, 1),        fToBind = this,        fNOP    = function() {},        fBound  = function() {          // this instanceof fNOP === true时,说明返回的fBound被当做new的构造函数调用          return fToBind.apply(this instanceof fNOP                 ? this                 : oThis,                 // 获取调用时(fBound)的传参.bind 返回的函数入参往往是这么传递的                 aArgs.concat(Array.prototype.slice.call(arguments)));        };    // 维护原型关系    if (this.prototype) {      // Function.prototype doesn't have a prototype property      fNOP.prototype = this.prototype;     }    // 下行的代码使fBound.prototype是fNOP的实例,因此    // 返回的fBound若作为new的构造函数,new生成的新对象作为this传入fBound,新对象的__proto__就是fNOP的实例    fBound.prototype = new fNOP();    return fBound;  };}复制代码

刚看到MDN的polyfill时,基本处于懵逼状态,后面细细琢磨才明白,要清晰bind的polyfill需要了解bind方法的操作流程,new操作符,和继承原理才行。

主要疑惑:

  • bind方法的polyfill思路是什么
  • 为什么要this为function对象
  • 如何将外部的参数传入
  • fNOP起到了什么作用
  • 为何在fToBind.apply时要判断对bind调用是否是new操作符

bind方法的polyfill思路

通过前面的介绍,bind方法与apply,call不同在于bind方法调用时返回的是一个新函数,而apply,call是立即执行,在不支持bind的浏览器环境下,需要用apply来模拟bind执行,核心在于bind是返回一个绑定this对象的函数,因此在polyfill中只需要返回一个函数,在返回的函数中通过apply方法绑定this对象和处理参数即可。

this类型判断

bind方法返回的是一个绑定了this对象的函数,并且bind是Function的方法,在函数体上调用,因此要对bind调用时的this进行判断如果不是function对象则抛出错误。

if (typeof this !== 'function') {      // 判断调用bind方法的是否是函数。      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');    }复制代码

参数处理

在bind方法调用时需要传入两个参数,第一个是绑定的this对象,第二个是绑定的this对象的参数,因为bind方法返回一个新的函数,新的函数又可以传递参数。 所以在bind中一共有两个地方的参数需要处理,调用bind方法时的参数,和bind方法调用返回新函数,新函数在执行时传入的参数,这样说有点抽象,来看一个例子。

var price =  function (a,b){  //price.bind(obj,10) obj的value属性值  console.log('绑定this对象的价格是',this.value)  //price.bind(obj,10)第二个参数的值  console.log('调用bind方法传入的价格是',a)  //price.bind(obj,10)(20)调用bind方法执行后函数传入的参数  console.log('调用bind方法执行后的函数传入的价格是',b)}var obj = {  value:5}price.bind(obj,10)(20)//绑定this对象的价格是 5//调用bind方法传入的价格是 10//调用bind方法执行后的函数传入的价格是 20复制代码

回到具体的polyfill中,其中

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

这里的aArgs变量就是用来存储bind方法调用时传入的参数,其中通过Array.prototype.slice.call可以把传入的参数转化为数组,为什么要转化为数组,因为在具体调用bind时,参数个数是不确定的,在不确定参数个数时需要使用apply方法,apply方法的第二参数接受一个数组。而...slice.call(arguments, 1),则是把bind方法调用时传入的参数从第二个开始转化为数组(因为bind方法的第一个参数是绑定的this对象)。

注意这里处理的是bind(this,arguments)中的arguments,还有bind方法执行后的函数再调用时传入的参数需要处理也就是bind(this,arguments)(fArgs)中的fArgs。

在polyfill中,是这样处理fArgs的

fBound  = function() {          return fToBind.apply(this instanceof fNOP                 ? this                 : oThis,                 // 获取调用时(fBound)的传参.bind 返回的函数入参往往是这么传递的                 aArgs.concat(Array.prototype.slice.call(arguments)));        };复制代码

在返回函数中通过aArgs.concat(Array.prototype.slice.call(arguments)))一起把bind方法传入的参数(aArgs)和fArgs组合成为一个新的数组,作为apply方法的第二个参数。

fNOP函数解析

在polyfill中,fNOP作用类似于寄生组合继承中的object.create()。作为一个中间函数链接返回的新函数和原函数的原型链。也就是继承原函数的方法和原型链。主要处理当返回的fBound被作为new的构造函数时原型链的继承的情况,注意当这种情况发生时bind方法传入绑定的this被忽略,参数传递不变,this使用原函数的this对象。

fNOP = function() {},        fBound  = function() {          return fToBind.apply();        };    // 维护原型关系    if (this.prototype) {      // Function.prototype doesn't have a prototype property      fNOP.prototype = this.prototype;     }    // 下行的代码使fBound.prototype是fNOP的实例,因此    // 返回的fBound若作为new的构造函数,new生成的新对象作为this传入fBound,新对象的__proto__就是fNOP的实例    fBound.prototype = new fNOP();    return fBound;复制代码

为何要处理new func.bind()这种情况呢?来看一下new操作的执行过程

new操作符解释引用这篇文章

var a = new myFunction("Li","Cherry");new myFunction{    var obj = {};    obj.__proto__ = myFunction.prototype;    var result = myFunction.call(obj,"Li","Cherry");    return typeof result === 'obj'? result : obj;}复制代码

1.创建一个空对象 obj;

2.将新创建的空对象的隐式原型指向其构造函数的显示原型。
3.使用 call 改变 this 的指向
4.如果无返回值或者返回一个非对象值,则将 obj 返回作为新对象;如果返回值是一个新对象的话那么直接直接返回该对象。

可知在执行new操作时this的指向已经被改变了如果此时还是使用bind方法传入的要绑定的this,那么原函数的原型链就会被切断,导致new出来的新对象无法继承原函数的方法。所以当fToBind被当做构造函数使用时,放弃绑定传入的this对象。

总结

由上可知,bind的polyfill主要处理了bind方法调用时参数传递问题,被当做构造函数使用时的继承问题,如果对bind执行流程和继承原理熟悉,bind的polyfill就可以一眼看穿了。

转载于:https://juejin.im/post/5bf69423e51d45491b0142a8

你可能感兴趣的文章
蔡为东:行之有效的IT技术团队管理实践
查看>>
Android笔试总结
查看>>
MGDrawingSlate
查看>>
GIKAnimatedCallout
查看>>
内容IMG图片地址批量追加域名
查看>>
开源 免费 java CMS - FreeCMS2.0 移动APP生成栏目数据
查看>>
【Android Studio】为Android Studio设置HTTP代理
查看>>
mysql数据库相关
查看>>
ES 使用优化整理
查看>>
Android 常用代码总结 工具类
查看>>
ubuntu14.04安装mysql5.7
查看>>
php的引用符号 &
查看>>
使用svn的方式访问github(不成功)
查看>>
Jenkins(二)
查看>>
Node.js安装及环境配置之Windows篇
查看>>
从Oracle迁移到AntDB(一)-- ora2pg-install
查看>>
Oracle 关键字(保留字) 大全
查看>>
php-------代码加密的几种方法
查看>>
沈比利:一战最佳狙击手 父辈是上…
查看>>
python/django 安装小流程及开发网页显示中文
查看>>