扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章将为大家详细讲解有关JavaScript中如何使用的bind方法,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
我们提供的服务有:成都做网站、成都网站建设、微信公众号开发、网站优化、网站认证、洪湖ssl等。为近千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的洪湖网站制作公司
本篇文章给大家带来的内容是关于JavaScript中的bind方法的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
之前已经实现过了call,apply和new。今天顺便把bind也实现下。
首先:
ok,上代码~
Function.prototype.mybind = function(context){ let that = this; let args1 = Array.prototype.slice.call(arguments,1); let bindFn = function(){ let args2 = Array.prototype.slice.call(arguments); return that.apply(this instanceof bindFn?this:context,args1.concat(args2)); } let Fn = function(){}; Fn.prototype = this.prototype; bindFn.prototype = new Fn(); return bindFn; }
首先 获取到第一次传递的参数args1,此处要做截取处理,因为第一个参数是this。接下来声明一个函数bindFn,在该bindFn中获取了第二次传的参数args2,并且返回了that的执行。此处的that就是原函数,执行该原函数绑定原函数this的时候要注意判断。如果this是构造函数bindFn new出来的实例,那么此处的this一定是该实例本身。反之,则是bind方法传递的this(context)。最后再把两次获得的参数通过concat()连接起来传递进去,这样就实现了前3条。
最后一条:构造函数上的属性和方法,每个实例上都有。 此处通过一个中间函数Fn,来连接原型链。Fn的prototype等于this的prototype。Fn和this指向同一个原型对象。bindFn的prototype又等于Fn的实例。Fn的实例的__proto__又指向Fn的prototype。即bindFn的prototype指向和this的prototype一样,指向同一个原型对象。至此,就实现了自己的bind方法。
代码写好了, 测试一下吧~
Function.prototype.mybind = function(context){ let that = this; let args1 = Array.prototype.slice.call(arguments,1); let bindFn = function(){ let args2 = Array.prototype.slice.call(arguments); return that.apply(this instanceof bindFn?this:context,args1.concat(args2)); } let Fn = function(){}; Fn.prototype = this.prototype; bindFn.prototype = new Fn(); return bindFn; } let obj = { name:'tiger' } function fn(name,age){ this.say = '汪汪~'; console.log(this); console.log(this.name+'养了一只'+name+','+age+'岁了 '); } /** 第一次传参 */ let bindFn = fn.mybind(obj,'
关于JavaScript中如何使用的bind方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流