擴(kuò)展JavaScript功能的正確方法(譯文)
更新時間：2012年04月12日 12:00:48 作者：
JavaScript已經(jīng)內(nèi)置了很多強(qiáng)大的方法，但有時你需要的某個功能在內(nèi)置的方法中沒有，我們怎么來優(yōu)雅地擴(kuò)展JavaScript功能呢
早上看到《JavaScript 每周導(dǎo)讀》【第三期】一文，里面發(fā)現(xiàn)一篇文章(Extending JavaScript – The Right Way)，覺得還不錯，翻譯過來跟大家共享，本文并不是逐字逐句進(jìn)行翻譯，盡量說得通俗易懂。
原文地址：Extending JavaScript – The Right Way
以下是譯文
JavaScript已經(jīng)內(nèi)置了很多強(qiáng)大的方法，但有時你需要的某個功能在內(nèi)置的方法中沒有，我們怎么來優(yōu)雅地擴(kuò)展JavaScript功能呢。
例如我們想增加一個capitalize()方法來實現(xiàn)首字母大寫，通常我們這樣寫：
復(fù)制代碼 代碼如下:
if(!String.prototype.capitalize)
{
String.prototype.capitalize = function()
{
return this.slice(0,1).toUpperCase() + this.slice(1).toLowerCase();
}
}
上面的代碼可以正常使用，但如果在某個地方有下面的代碼：
復(fù)制代碼 代碼如下:
var strings = "yay";
for(i in strings) console.log(i + ":" + strings[i]);
我們得到的結(jié)果是這樣的：
0: y
1: a
2: y
capitalize: function () { return this.slice(0, 1).toUpperCase() + this.slice(1).toLowerCase(); }
這顯然不是我們想要的結(jié)果，輸出了我們增加的方法的原因是我們增加的方法的enumerable屬性默認(rèn)為true。
我們可以通過簡單地把枚舉屬性(enumerable)設(shè)置為false避免這個問題，使用defineProperty方法進(jìn)行功能的擴(kuò)展：
復(fù)制代碼 代碼如下:
if(!String.prototype.capitalize)
{
Object.defineProperty(String.prototype, 'capitalize',
{
value: function()
{
return this.slice(0,1).toUpperCase() + this.slice(1).toLowerCase();
},
enumerable: false
});
}
現(xiàn)在我們再運行這段代碼：
復(fù)制代碼 代碼如下:
var strings = "yay";
for(i in strings) console.log(i + ":" + strings[i]);
我們得到的結(jié)果是：
0: y
1: a
2: y
要注意的是，用循環(huán)沒有輸出的并不代表不存在，我們可以通過下面的代碼查看到定義：
復(fù)制代碼 代碼如下:
var strings = "yay";
console.log(strings.capitalize)
會輸出：
復(fù)制代碼 代碼如下:
function () { return this.slice(0, 1).toUpperCase() + this.slice(1).toLowerCase(); }
用這種方式擴(kuò)展JavaScript功能比較靈活，我們可以用這種方式來定義我們自己的對象，并設(shè)置一些默認(rèn)值。
以下是另外幾個擴(kuò)展方法，你可以在自己的項目中使用：
String.pxToInt()
把"200px"這樣的字符串轉(zhuǎn)換為數(shù)字 200 :
復(fù)制代碼 代碼如下:
if(!String.prototype.pxToInt)
{
Object.defineProperty(String.prototype, 'pxToInt',
{
value: function()
{
return parseInt(this.split('px')[0]);
},
enumerable: false
});
}
String.isHex()
判斷一個字符串是否是16進(jìn)制表示的，如"#CCC" 或 "#CACACA"
復(fù)制代碼 代碼如下:
if(!String.prototype.isHex)
{
Object.defineProperty(String.prototype, 'isHex',
{
value: function()
{
return this.substring(0,1) == '#' &&
(this.length == 4 || this.length == 7) &&
/^[0-9a-fA-F]+$/.test(this.slice(1));
},
enumerable: false
});
}
String.reverse()
字符串反轉(zhuǎn)：
復(fù)制代碼 代碼如下:
if(!String.prototype.reverse)
{
Object.defineProperty(String.prototype, 'reverse',
{
value: function()
{
return this.split( '' ).reverse().join( '' );
},
enumerable: false
});
}
String.wordCount()
統(tǒng)計單詞數(shù)量，用空格分開
復(fù)制代碼 代碼如下:
if(!String.prototype.wordCount)
{
Object.defineProperty(String.prototype, 'wordCount',
{
value: function()
{
return this.split(' ').length;
},
enumerable: false
});
}
String.htmlEntities()
html標(biāo)簽如<和>編碼為特殊字符
復(fù)制代碼 代碼如下:
if(!String.prototype.htmlEntities)
{
Object.defineProperty(String.prototype, 'htmlEntities',
{
value: function()
{
return String(this).replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"');
},
enumerable: false
});
}
String.stripTags()
去掉HTML標(biāo)簽：
復(fù)制代碼 代碼如下:
if(!String.prototype.stripTags)
{
Object.defineProperty(String.prototype, 'stripTags',
{
value: function()
{
return this.replace(/<\/?[^>]+>/gi, '');
},
enumerable: false
});
}
String.trim()
去掉首尾空格：
復(fù)制代碼 代碼如下:
if(!String.prototype.trim)
{
Object.defineProperty(String.prototype, 'trim',
{
value: function()
{
return this.replace(/^\s*/, "").replace(/\s*$/, "");
},
enumerable: false
});
}
String.stripNonAlpha()
去掉非字母字符：
復(fù)制代碼 代碼如下:
if(!String.prototype.stripNonAlpha)
{
Object.defineProperty(String.prototype, 'stripNonAlpha',
{
value: function()
{
return this.replace(/[^A-Za-z ]+/g, "");
},
enumerable: false
});
}
Object.sizeof()
統(tǒng)計對象的大小，如{one: “and”, two: “and”}為2
復(fù)制代碼 代碼如下:
if(!Object.prototype.sizeof)
{
Object.defineProperty(Object.prototype, 'sizeof',
{
value: function()
{
var counter = 0;
for(index in this) counter++;
return counter;
},
enumerable: false
});
}
這種方式擴(kuò)展JS原生對象的功能還是挺不錯的，但除非必要(項目中用的很多)，不建議直接在原生對象上擴(kuò)展功能，會造成全局變量污染。
另外，文中的pxToInt()方法是沒什么必要的，JS中的parseInt()可以直接完成這樣的功能：parsetInt("200px")===200
htmlEntities方法貌似有問題，下面另提供一個：
復(fù)制代碼 代碼如下:
if(!String.prototype.htmlEntities)
{
Object.defineProperty(String.prototype, 'htmlEntities',
{
value: function()
{
var div = document.createElement("div");
if(div.textContent){
div.textContent=this;
}
else{
div.innerText=this;
}
return div.innerHTML;
},
enumerable: false
});
}
相關(guān)文章
javascript代碼運行的過程中基本類型會找到對應(yīng)的包裝對象，然后包裝對象把所有的屬性和方法給了基本類型，然后包裝對象被系統(tǒng)進(jìn)行銷毀，所以理解了包裝對象可以很好的理解之前寫的代碼為什么可以這樣做了。2015-07-07
javascript 加入收藏、設(shè)為首頁(IE,firefox兼容腳本之家版)
網(wǎng)上流行很多的加入收藏、設(shè)為首頁等功能代碼，但各方面不是很完善，特腳本之家編輯特為大家準(zhǔn)備了可以直接使用的代碼。2009-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)發(fā)紅包功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章主要介紹了鼠標(biāo)滾軸控制文本框值的JS代碼，有需要的朋友可以參考一下2013-11-11
為了使頁面更快的完成加載，經(jīng)常需要對javascript/css代碼進(jìn)行壓縮以減小體積，這里簡單列一下用過的壓縮工具，同時也作為存檔2012-02-02
ionic2屏幕適配實現(xiàn)適配手機(jī)、平板等設(shè)備的示例代碼
本篇文章主要介紹了ionic2屏幕適配實現(xiàn)適配手機(jī)、平板等設(shè)備的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-08-08
這篇文章主要為大家詳細(xì)介紹了js瀑布流布局的實現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了JavaScrip數(shù)組去重操作,結(jié)合實例形式總結(jié)分析了javascript針對數(shù)組的遍歷、判斷、去重等相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
JS注冊/移除事件處理程序(ExtJS應(yīng)用程序設(shè)計實戰(zhàn))
最常做的事情就是注冊事件處理程序，因為在ExtJS的世界里，幾乎完全由時間組成，下面是處理程序案例，感興趣的朋友可以參考下哈，希望可以幫助到你2013-05-05
情人節(jié)單身的我是如何在敲完代碼之后收到12束玫瑰的(javascript)
這篇文章主要介紹了情人節(jié)單身的我是如何在敲完代碼之后收到12束玫瑰的，感興趣的朋友一起來學(xué)習(xí)下2015-08-08