關(guān)于原生js中bind函數(shù)的簡單實(shí)現(xiàn)
今天繼續(xù)研究了bind函數(shù)的實(shí)現(xiàn),也知道了shim和polyfill的說法,現(xiàn)在總結(jié)一下,
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 || window,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}
這是官方文檔上的實(shí)現(xiàn),我分二個(gè)方面來談我要說的東西,
第一個(gè)是參數(shù),agruments的使用
var aArgs = Array.prototype.slice.call(arguments, 1),這里是將bind函數(shù)的參數(shù)數(shù)組取出來,第一個(gè)參數(shù)不要(就是不要oThis)也就是要被綁定方法的那個(gè)對象,第二個(gè)是
aArgs.concat(Array.prototype.slice.call(arguments))); 這里是用了數(shù)組的方法,把參數(shù)插在參數(shù)數(shù)組后面,要注意,這個(gè)函數(shù)是要被return 出去然后執(zhí)行的,他的參數(shù)數(shù)組是return出去的那個(gè)fBound函數(shù)的參數(shù)數(shù)組,所以上下兩個(gè)參數(shù)數(shù)組是不一樣的,有點(diǎn)像柯里化。
第二個(gè)是上下文,在其中上下文的變化比較難理解,bind函數(shù)主要就是為了綁定上下文來使用的
fToBind = this 這里是保存了對象的上下文,緊接著下面的apply方法讓要被綁定的那個(gè)對象可以使用該上下文
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
這里是以fNOP為中介把this.prototype這個(gè)原對象的屬性給fBound,確保fBound是在定義的時(shí)候的那個(gè)上下文里面執(zhí)行。本來
bound.prototype = self.prototype就可以將原屬性集成過來了,但是這樣兩個(gè)對象屬性都指向同一個(gè)地方,修改 bound.prototype 將會造成self.prototype 也發(fā)生改變,這樣并不是我們的本意。所以通過一個(gè)空函數(shù) nop 做中轉(zhuǎn),能有效的防止這種情況的發(fā)生。
以上這篇關(guān)于原生js中bind函數(shù)的簡單實(shí)現(xiàn)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
利用JavaScript緩存遠(yuǎn)程竊取Wi-Fi密碼的思路詳解
這篇文章主要介紹了利用JavaScript緩存遠(yuǎn)程竊取Wi-Fi密碼的方法,本文通過實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
JavaScript 仿關(guān)機(jī)效果的圖片層
最近發(fā)現(xiàn)了一用 YUI 做的 Lightbox, 只需少量的設(shè)置就能類Window關(guān)機(jī)的效果來顯示圖片。2008-12-12
javascript間隔定時(shí)器(延時(shí)定時(shí)器)學(xué)習(xí) 間隔調(diào)用和延時(shí)調(diào)用
這篇文章主要介紹了javascript間隔調(diào)用和延時(shí)調(diào)用示例,介紹setInterval方法和clearInterval方法的使用方法,大家參考使用吧2014-01-01
從parcel.js打包出錯(cuò)到選擇nvm的全部過程
這篇文章主要介紹了從parcel.js打包出錯(cuò)到選擇nvm的全部過程,需要的朋友可以參考下2018-01-01
js之如何刪除多層數(shù)組嵌套的最后一層中的部分?jǐn)?shù)據(jù)
這篇文章主要介紹了js之如何刪除多層數(shù)組嵌套的最后一層中的部分?jǐn)?shù)據(jù)問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06

