快捷導(dǎo)航

javascript當(dāng)中的代碼嗅探擴(kuò)展原生對象和原型(prototype)

更新時間：2013年01月11日 09:37:27 投稿：whsnow

如果不是有特殊需要而去擴(kuò)展原生對象和原型（prototype）的做法是不好的,除非這樣做是值得的，例如，向一些舊的瀏覽器中添加一些ECMAScript5中的方法

注：翻譯之中有什么不恰當(dāng)?shù)牡胤?，歡迎大家指正，祝大家雙節(jié)快樂！
如果不是有特殊需要而去擴(kuò)展原生對象和原型（prototype）的做法是不好的

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

除非這樣做是值得的，例如，向一些舊的瀏覽器中添加一些ECMAScript5中的方法。
在這種情況下，我們一般這樣做：

復(fù)制代碼代碼如下:

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

如果我們比較偏執(zhí)，為了防止別人將map定義為其它意想不到的值，像true或其他，我們可以將檢測代碼改為下面這樣：

復(fù)制代碼代碼如下:

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

但是，在一個充滿敵意和殘酷競爭的環(huán)境下（換句話說，但你提供或者使用一個js庫時），你不應(yīng)該相信任何人。如果其他人的js代碼先于你的js代碼加載，并且以某種方式定義了一個不完全兼容ES5的map()方法，導(dǎo)致你的代碼不能正常運(yùn)行，該怎么辦呢？

不過，你可以相信瀏覽器，如果Webkit內(nèi)核實(shí)現(xiàn)了map()方法，你可以放心，這個方法肯定會正常運(yùn)行。否則的話，你就要用你的代碼進(jìn)行檢測了。

幸運(yùn)的是，這在JavaScript當(dāng)中很容易實(shí)現(xiàn)，當(dāng)你調(diào)用原生函數(shù)的toString方法的時候，會返回一個函數(shù)的字符串，該函數(shù)的函數(shù)體是[native code]。
例如在Chrome的控制臺下：

復(fù)制代碼代碼如下:

> Array.prototype.map.toString();
"function map() { [native code] }"

一個適當(dāng)?shù)拇a檢查向來就是一個稍微令人不快的事，因?yàn)椴煌瑸g覽器對空格和換行處理的太過輕率。測試如下：

復(fù)制代碼代碼如下:

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

只簡單的去掉\s會得到更實(shí)用的字符串：

復(fù)制代碼代碼如下:

Array.prototype.map.toString().replace(/\s/g, '');
// "functionmap(){[nativecode]}"

你可以將它封裝成一個可以重用的shim()函數(shù)，這樣以來你就沒有必要去重復(fù)所有的類似!

Array.prototype...這樣的操作了。這個函數(shù)會接受一個對象作為參數(shù)（例如，Array.prototype），一個將要添加的屬性（例如 'map'）和一個要添加的函數(shù)。

復(fù)制代碼代碼如下:

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;
}

測試：

復(fù)制代碼代碼如下:

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

（完）^_^