javascript當(dāng)中的代碼嗅探擴(kuò)展原生對(duì)象和原型(prototype)
注:翻譯之中有什么不恰當(dāng)?shù)牡胤?,歡迎大家指正,祝大家雙節(jié)快樂(lè)!
如果不是有特殊需要而去擴(kuò)展原生對(duì)象和原型(prototype)的做法是不好的
//不要這樣做
Array.prototype.map = function() {
// 一些代碼
};
除非這樣做是值得的,例如,向一些舊的瀏覽器中添加一些ECMAScript5中的方法。
在這種情況下,我們一般這樣做:
if (!Array.prototype.map) {
Array.prototype.map = function() {
//一些代碼
};
}
如果我們比較偏執(zhí),為了防止別人將map定義為其它意想不到的值,像true或其他,我們可以 將檢測(cè)代碼改為下面這樣:
if (typeof Array.prototype.map !== "function") {
Array.prototype.map = function() {
// 一些代碼
};
}
但是,在一個(gè)充滿敵意和殘酷競(jìng)爭(zhēng)的環(huán)境下(換句話說(shuō),但你提供或者使用一個(gè)js庫(kù)時(shí)),你不應(yīng)該相信任何人。如果其他人的js代碼先于你的js代碼加載,并且以某種方式定義了一個(gè)不完全兼容ES5的map()方法,導(dǎo)致你的代碼不能正常運(yùn)行,該怎么辦呢?
不過(guò),你可以相信瀏覽器,如果Webkit內(nèi)核實(shí)現(xiàn)了map()方法,你可以放心,這個(gè)方法肯定會(huì)正常運(yùn)行。否則的話,你就要用你的代碼進(jìn)行檢測(cè)了。
幸運(yùn)的是,這在JavaScript當(dāng)中很容易實(shí)現(xiàn),當(dāng)你調(diào)用原生函數(shù)的toString方法的時(shí)候,會(huì)返回一個(gè)函數(shù)的字符串,該函數(shù)的函數(shù)體是[native code]。
例如在Chrome的控制臺(tái)下:
> Array.prototype.map.toString();
"function map() { [native code] }"
一個(gè)適當(dāng)?shù)拇a檢查向來(lái)就是一個(gè)稍微令人不快的事,因?yàn)椴煌瑸g覽器對(duì)空格和換行處理的太過(guò)輕率。測(cè)試如下:
Array.prototype.map.toString().replace(/\s/g, '*');
// "*function*map()*{*****[native*code]*}*" // IE
// "function*map()*{*****[native*code]*}" // FF
// "function*map()*{*[native*code]*}" // Chrome
只簡(jiǎn)單的去掉\s會(huì)得到更實(shí)用的字符串:
Array.prototype.map.toString().replace(/\s/g, '');
// "functionmap(){[nativecode]}"
你可以將它封裝成一個(gè)可以重用的shim()函數(shù),這樣以來(lái)你就沒(méi)有必要去重復(fù)所有的類似!
Array.prototype...這樣的操作了。這個(gè)函數(shù)會(huì)接受一個(gè)對(duì)象作為參數(shù)(例如,Array.prototype),一個(gè)將要添加的屬性(例如 'map')和一個(gè)要添加的函數(shù)。
function shim(o, prop, fn) {
var nbody = "function" + prop + "(){[nativecode]}";
if (o.hasOwnProperty(prop) &&
o[prop].toString().replace(/\s/g, '') === nbody) {
//表名是原生的!
return true;
}
//新添加的
o[prop] = fn;
}
測(cè)試:
//這是原生的方法
shim(
Array.prototype, 'map',
function(){/*...*/}
); // true
//這是新添加的方法
shim(
Array.prototype, 'mapzer',
function(){alert(this)}
);
[1,2,3].mapzer(); // alerts 1,2,3
(完)^_^
相關(guān)文章
微信小程序商城項(xiàng)目之側(cè)欄分類效果(1)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崙?zhàn)商城系列之側(cè)欄分類效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04JS實(shí)現(xiàn)常用導(dǎo)航鼠標(biāo)下經(jīng)過(guò)下方橫線自動(dòng)跟隨效果
這篇文章主要介紹了JS寫(xiě)常用導(dǎo)航鼠標(biāo)下經(jīng)過(guò)下方橫線自動(dòng)跟隨效果,文中還給大家講解了基于css?+?js?實(shí)現(xiàn)導(dǎo)航欄下劃線跟隨鼠標(biāo)滑動(dòng)效果,需要的朋友可以參考下2023-01-01詳細(xì)談?wù)凧avaScript中循環(huán)之間的差異
JS循環(huán)語(yǔ)句也叫迭代語(yǔ)句,是一種特殊的語(yǔ)句,主要用于需要多次執(zhí)行的代碼塊,下面這篇文章主要給大家介紹了關(guān)于JavaScript中循環(huán)之間的差異的相關(guān)資料,需要的朋友可以參考下2021-08-08刷新頁(yè)面的幾種方法小結(jié)(JS,ASP.NET)
本篇文章只要是對(duì)刷新頁(yè)面的幾種方法進(jìn)行了詳細(xì)的總結(jié)介紹,包括JS與ASP.NET。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01關(guān)于頁(yè)面嵌入swf覆蓋div層的問(wèn)題的解決方法
這篇文章主要介紹了關(guān)于頁(yè)面嵌入swf覆蓋div層的問(wèn)題的解決方法,需要的朋友可以參考下2014-02-02