首頁 > web前端 > js教程 > 主體

javascript當中的程式碼嗅探擴充原生物件和原型(prototype)_javascript技巧

WBOY
發布: 2016-05-16 17:43:54
原創
1123 人瀏覽過

:翻譯之中有什麼不恰當的地方,歡迎大家指正,祝大家雙節快樂!
如果不是有特殊需求而去擴充原生物件和原型(prototype)的做法是不好的

複製程式碼程式碼如下:

//不要這樣做
Array.prototype.map = function() {
// 一些程式碼
};

除非這樣做是值得的,例如,向一些舊的瀏覽器中添加一些ECMAScript5中的方法。
在這種情況下,我們一般會這樣做:
複製程式碼 程式碼如下:

if (!Array.prototype.map) {
Array.prototype.map = function() {
//一些代碼
};
}

如果我們比較偏執,為了防止別人將map定義為其它意想不到的值,像true或其他,我們可以將檢測代碼改為下面這樣:
複製程式碼 程式碼如下:

if (typeof Array.prototype.map !== "function") {
Array.prototype.map = function() {
// 一些程式碼
};
}

(儘管這將破壞其它開發者的map定義,並影響他們功能的實現)
但是,在在一個充滿敵意和殘酷競爭的環境下(換句話說,但你提供或使用一個js庫時),你不應該相信任何人。如果其他人的js程式碼先於你的js程式碼加載,並且以某種方式定義了一個不完全相容ES5的map()方法,導致你的程式碼不能正常運行,該怎麼辦呢?

不過,你可以相信瀏覽器,如果Webkit核心實作了map()方法,你可以放心,這個方法一定會正常運作。否則的話,你就要用你的程式碼來偵測了。

幸運的是,這在JavaScript當中很容易實現,當你呼叫原生函數的toString方法的時候,會傳回一個函數的字串,該函數的函數體是[native code]。
例如在Chrome的控制台下:
複製程式碼 程式碼如下:


程式碼如下:

Array.prototype.map.toString();
"function map() { [native code] }" 複製程式碼


程式碼如下:


Array.prototype.map.toString() .replace(/s/g, '*');
// "*function*map()*{*****[native*code]*}*" // IE
// " function*map()*{*****[native*code]*}" // FF
// "function*map()*{*[native*code]*}" // Chrome 複製程式碼



複製程式碼


程式碼如下:

Array.prototype.map.toString().replace(/s/g, ''); // "functionmap(){[nativecode]}" 你可以將它封裝成一個可以重複使用的shim()函數,這樣以來你就沒有必要去重複所有的類似!Array.prototype...這樣的操作了。這個函數會接受一個物件作為參數(例如,Array.prototype),一個將要新增的屬性(例如 'map')和一個要新增的函數。



複製程式碼


程式碼如下:


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; } 測試:
複製程式碼 程式碼如下:

//這是原生的方法
shim(
Array.prototype, 'map',
function(){/*...*/}
); / / true
//這是新加入的方法
shim(
Array.prototype, 'mapzer',
function(){alert(this)}
);
[ 1,2,3].mapzer(); // alerts 1,2,3

(完)^_^
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板