bind方法实今世码_javascript本领_脚本之家,bind方法介绍_底子知识_脚本之家

以前,你可能会直接设置self=this或者that=this等等,这样做当然也能起作用,但是使用Function.prototype.bind()会更好,看上去也更专业。下面举个简单的例子:

前端开发者应该很清楚 Javscript 脚本的 function 函数对象可以通过 call 或 apply 方法,使其改变内部作用域所指向的对象,实现更多可扩展的功能开发。ie 原生支持 function 对象的 call 和 apply 方法,在 firefox 或其它浏览器下也得到支持,但是 call 和 apply 方法是立即作用并执行,例如: 复制代码 代码如下: var func = function ; }.apply; 当脚本解析引擎执行到这段代码时,会立即弹出对话框并显示 object 字符串。我们的初衷是想定义 func 方法作用在 window 对象域上,并在后期调用时再执行,但是 call 和 apply 方法并不能满足我们的初衷,它们会立即得到执行。在 google 一番技术资料后,发现 firefox 原生支持一个 bind 方法,该方法很好的满足了我们的初衷,调用方法与 call 和 apply 一样,只是定义完成后,在后期调用时该方法才会执行。但是这个 bind 方法只有在 ie10 版本的浏览器才得到原生支持,低于该版本的浏览器下执行时会得到一个 undefined 的错误提示。于是只好再次上网 google 解决方案,功夫不负有心人,我们在 firefox 的开发站找到了解决方案,那就是增加 property 原型使得所有浏览器都能支持 bind 方法,代码如下: 复制代码 代码如下: if (!Function.prototype.bind) { Function.prototype.bind = function { 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, fToBind = this, fNOP = function () {}, fBound = function () { return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, aArgs.concat(Array.prototype.slice.call; }; fNOP.prototype = this.prototype; fBound.prototype = new fNOP(); return fBound; }; } 看懂这段代码需要点功底,我只是知道如何拿来用,如果哪位大牛有兴趣能够介绍一下这段源码的原理,不胜感激,谢谢! 单纯不是什么态度,而是一种满足。

复制代码 代码如下:var myObj = { specialFunction: function () { }, anotherSpecialFunction: function () { }, getAsyncData: function ; }, render: function () { var that = this; this.getAsyncData { that.specialFunction(); that.anotherSpecialFunction; }};myObj.render();在这个例子中,为了保持myObj上下文,设置了一个变量that=this,这样是可行的,但是没有使用Function.prototype.bind()看着更整洁:复制代码 代码如下:render: function () { this.getAsyncData { this.specialFunction(); this.anotherSpecialFunction;}

在调用.bind()时,它会简单的创建一个新的函数,然后把this传给这个函数。实现.bind()的代码大概是这样的:复制代码 代码如下:Function.prototype.bind = function { var fn = this; return function () { return fn.apply; };}

下面在看一个简单的使用Function.prototype.bind()的例子:

复制代码 代码如下:var foo = { x: 3};var bar = function(){ console.log; // undefinedvar boundFunc = bar.bind; // 3

是不是很好用呢!不过遗憾的是IE8及以下的IE浏览器并不支持Function.prototype.bind()。支持的浏览器有Chrome 7+,Firefox 4.0+,IE 9+,Opera 11.60+,Safari 5.1.4+。虽然IE 8/7/6等浏览器不支持,但是Mozilla开发组为老版本的IE浏览器写了一个功能类似的函数,代码如下:复制代码 代码如下:if (!Function.prototype.bind) { Function.prototype.bind = function { 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, fToBind = this, fNOP = function () {}, fBound = function () { return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, aArgs.concat(Array.prototype.slice.call; }; fNOP.prototype = this.prototype; fBound.prototype = new fNOP(); return fBound; };}

本文由澳门威斯尼人平台登录发布于服务器&运维,转载请注明出处:bind方法实今世码_javascript本领_脚本之家,bind方法介绍_底子知识_脚本之家

相关阅读