ie支持function.bind()方法實(shí)現(xiàn)代碼
更新時(shí)間:2012年12月27日 09:22:14 作者:
在 google 一番技術(shù)資料后,發(fā)現(xiàn) firefox 原生支持一個(gè) bind 方法,該方法很好的滿足了我們的初衷,調(diào)用方法與 call 和 apply 一樣,只是定義完成后,在后期調(diào)用時(shí)該方法才會(huì)執(zhí)行,需要的朋友可以了解下
前端開發(fā)者應(yīng)該很清楚 Javscript 腳本的 function 函數(shù)對(duì)象可以通過 call 或 apply 方法,使其改變內(nèi)部作用域(this)所指向的對(duì)象,實(shí)現(xiàn)更多可擴(kuò)展的功能開發(fā)。ie 原生支持 function 對(duì)象的 call 和 apply 方法,在 firefox 或其它瀏覽器下也得到支持,但是 call 和 apply 方法是立即作用并執(zhí)行,例如:
var func = function () {
alert(this);
}.apply(window);
當(dāng)腳本解析引擎執(zhí)行到這段代碼時(shí),會(huì)立即彈出對(duì)話框并顯示 object 字符串。我們的初衷是想定義 func 方法作用在 window 對(duì)象域上,并在后期調(diào)用時(shí)再執(zhí)行,但是 call 和 apply 方法并不能滿足我們的初衷,它們會(huì)立即得到執(zhí)行。
在 google 一番技術(shù)資料后,發(fā)現(xiàn) firefox 原生支持一個(gè) bind 方法,該方法很好的滿足了我們的初衷,調(diào)用方法與 call 和 apply 一樣,只是定義完成后,在后期調(diào)用時(shí)該方法才會(huì)執(zhí)行。但是這個(gè) bind 方法只有在 ie10 版本的瀏覽器才得到原生支持,低于該版本的瀏覽器下執(zhí)行時(shí)會(huì)得到一個(gè) undefined 的錯(cuò)誤提示。于是只好再次上網(wǎng) google 解決方案,功夫不負(fù)有心人,我們?cè)?firefox 的開發(fā)站找到了解決方案,那就是增加 property 原型使得所有瀏覽器都能支持 bind 方法,代碼如下:
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 () {
return fToBind.apply(this instanceof fNOP && oThis
? this
: oThis,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}
看懂這段代碼需要點(diǎn)功底,我只是知道如何拿來用,如果哪位大牛有興趣能夠介紹一下這段源碼的原理,不勝感激,謝謝!
單純不是什么態(tài)度,而是一種滿足。
復(fù)制代碼 代碼如下:
var func = function () {
alert(this);
}.apply(window);
當(dāng)腳本解析引擎執(zhí)行到這段代碼時(shí),會(huì)立即彈出對(duì)話框并顯示 object 字符串。我們的初衷是想定義 func 方法作用在 window 對(duì)象域上,并在后期調(diào)用時(shí)再執(zhí)行,但是 call 和 apply 方法并不能滿足我們的初衷,它們會(huì)立即得到執(zhí)行。
在 google 一番技術(shù)資料后,發(fā)現(xiàn) firefox 原生支持一個(gè) bind 方法,該方法很好的滿足了我們的初衷,調(diào)用方法與 call 和 apply 一樣,只是定義完成后,在后期調(diào)用時(shí)該方法才會(huì)執(zhí)行。但是這個(gè) bind 方法只有在 ie10 版本的瀏覽器才得到原生支持,低于該版本的瀏覽器下執(zhí)行時(shí)會(huì)得到一個(gè) undefined 的錯(cuò)誤提示。于是只好再次上網(wǎng) google 解決方案,功夫不負(fù)有心人,我們?cè)?firefox 的開發(fā)站找到了解決方案,那就是增加 property 原型使得所有瀏覽器都能支持 bind 方法,代碼如下:
復(fù)制代碼 代碼如下:
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 () {
return fToBind.apply(this instanceof fNOP && oThis
? this
: oThis,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}
看懂這段代碼需要點(diǎn)功底,我只是知道如何拿來用,如果哪位大牛有興趣能夠介紹一下這段源碼的原理,不勝感激,謝謝!
單純不是什么態(tài)度,而是一種滿足。
您可能感興趣的文章:
- 讓IE8瀏覽器支持function.bind()方法
- Function.prototype.bind用法示例
- javascript中的Function.prototye.bind
- 深入理解JS中的Function.prototype.bind()方法
- jQuery中的.bind()、.live()和.delegate()之間區(qū)別分析
- JQuery中綁定事件(bind())和移除事件(unbind())
- JQuery中Bind()事件用法分析
- jQuery事件綁定on()、bind()與delegate() 方法詳解
- 淺談javascript中call()、apply()、bind()的用法
- 關(guān)于Function中的bind()示例詳解
相關(guān)文章
JavaScript運(yùn)行機(jī)制之事件循環(huán)(Event Loop)詳解
這篇文章主要介紹了JavaScript運(yùn)行機(jī)制之事件循環(huán)(Event Loop)詳解,本文從多個(gè)方面講解了Event Loop,需要的朋友可以參考下2014-10-10
Javascript實(shí)現(xiàn)跑馬燈效果的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄狫avascript實(shí)現(xiàn)跑馬燈效果的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
bootstrap側(cè)邊欄圓點(diǎn)導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了bootstrap側(cè)邊欄圓點(diǎn)導(dǎo)航效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01
解析JavaScript實(shí)現(xiàn)DDoS攻擊原理與保護(hù)措施
本文主要對(duì)JavaScript實(shí)現(xiàn)DDoS攻擊原理與保護(hù)措施進(jìn)行介紹,具有一定的參考價(jià)值,需要的朋友一起來看下吧2016-12-12
JavaScript中變量提升與函數(shù)提升經(jīng)典實(shí)例分析
這篇文章主要介紹了JavaScript中變量提升與函數(shù)提升,結(jié)合實(shí)例形式分析了JavaScript中的變量提升與函數(shù)提升相關(guān)原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2018-07-07
淺析js實(shí)現(xiàn)網(wǎng)頁(yè)截圖的兩種方式
這篇文章主要介紹了淺析js實(shí)現(xiàn)網(wǎng)頁(yè)截圖的兩種方式,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11

