博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
用原生js实现一个bind方法
阅读量:6324 次
发布时间:2019-06-22

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

bind用法介绍:

bind()方法创建一个新的函数, 当被调用时,将其this关键字设置为提供的值,在调用新函数时,在任何提供之前提供一个给定的参数序列。

这段是来自的介绍,我们可以理解bind方法返回一个新的函数,这个函数内部的this指向提供的参数值,来看个例子

const person = {      age: 20,      getAge() {        return this.age      }    }  const getAge = person.getAge  console.log(getAge()) // output :undefined

上面代码输出了undefined,什么原因呢?相信大家都知道,getAge()执行时内部的this指向了window,而window并没有age这个属性,我们并没有定义全局的age变量,那我们怎么解决这个问题呢?那就是用哪个bind方法,需要注意的是bind方法的兼容性,IE9以上包括IE9。其他现代浏览器不用说肯定是支持的。下面我们用一下bind方法来修改上面的例子

const person = {      age: 20,      getAge() {        return this.age      }    }  const getAge = person.getAge.bind(person)  console.log(getAge()) // output :20

我们看到通过bind方法就可以输出age了

bind语法格式

fun.bind(thisArg[, arg1[, arg2[, ...]]])

参数

thisArg

当绑定函数被调用时,该参数会作为原函数运行时的 this 指向。当使用new 操作符调用绑定函数时,该参数无效。

arg1, arg2, ...

当绑定函数被调用时,这些参数将置于实参之前传递给被绑定的方法

返回值

返回由指定的this值和初始化参数改造的原函数拷贝

个人理解:bind方法接受的第一个参数是你想绑定的this值,通常是个对象,这个对象在函数内部用this可以获取到,第一个参数后面可以跟若干个参数,这些参数可以在bind的时候传递,相当于预设参数。

好了,知道用法和参数后我们就可以实现一个简陋版的了

Function.prototype.bind=function (context) {  if(typeof this !=='function'){    throw new Error(`${this.name} is not a function`)  }  const srcFun=this// 保存原始函数  const arg=Array.prototype.slice.call(arguments,1)// 把arguments类数组转为真实数组  let noop=function(){}  const fBound= function () {   if(this instanceof noop){     context=this   }    // 合并新旧参数    return srcFun.apply(context,arg.concat(Array.prototype.slice.call(arguments,0)))  }  if(this.prototype){    noop.prototype=this.prototype//维护原型关系,指向原始函数  }  fBound.prototype=new noop()//新函数的prototype的__proto__指向noop.prototype  return fBound}

很简陋,没有严谨的判断。

一个绑定函数也能使用new操作符创建对象:这种行为就像把原函数当成构造器。提供的 this 值被忽略,同时调用时的参数被提供给模拟函数。

上面是MDN的一段话,也就是bind返回的函数也可以当做构造函数来用,此时bind传递的第一个参数无效,但是其他参数有效。

那么要做判断处理就是

//代码2if(this instanceof noop){     context=this   }

这段代码就可以区分出是在把函数当做构造函数来new了还是当做普通方法来调用了,我们知道

当new 的时候实际做了这点事

var obj={}obj._proto_=构造函数的prototype构造函数.call(obj)

所以现在在代码2中的this是构造函数的实例,那就得更改bind后的函数,让bind后的fBound函数的prototype指向noop的实例,这样此时的this就借助noop实例指向了noop的原型,那么this instanceof noop就是true了

总结

上面是我对bind方法的一些理解和实现,仅供参考和学习。bind方法在react中会比较常用到,有些面试题也会让自己实现一个,所以尝试一下也能学到不少东西了。

转载地址:http://itmaa.baihongyu.com/

你可能感兴趣的文章
预计我们两年内将迎来18 TB磁盘驱动器
查看>>
大数据:Hadoop族群介绍
查看>>
警惕精神抑郁 沟通应用中华通网络电话
查看>>
为什么很多优秀的软件公司和开发者愿意开源和共享?
查看>>
印度微信Hike Messenger推出Snapchat Stories类似功能
查看>>
高通:骁龙821阳谋
查看>>
健康一体机创造更好的医疗便捷体验!
查看>>
应用程序负载平衡新风潮
查看>>
LoadRunner中Lr_save_string()函数和Itoa()函数的使用
查看>>
大数据时代来临,微软面向高校学生免费开放R Server
查看>>
简单通俗易懂:一个小例子完美解释Naive Bayes(朴素贝叶斯)分类器
查看>>
【转】使用Nginx+Lua(OpenResty)开发高性能Web应用
查看>>
陕西省以大数据助力产业结构优化转型升级
查看>>
是什么产品让VMware甘当“小白鼠”?
查看>>
iOS史上最大漏洞出现 运营商罕见发公告提醒升级
查看>>
数据库中的事物处理
查看>>
浅谈运维平台选型,提速DevOps运维
查看>>
融资租赁助力光伏产业 风险防控成关键
查看>>
苹果iPhone版间谍软件生产商无底线:给钱就植入
查看>>
gatling官方文档翻译2
查看>>