擴展JavaScript功能的正確方法(譯文)

更新時間：2012年04月12日 12:00:48 作者：

JavaScript已經(jīng)內(nèi)置了很多強大的方法，但有時你需要的某個功能在內(nèi)置的方法中沒有，我們怎么來優(yōu)雅地擴展JavaScript功能呢

早上看到《JavaScript 每周導讀》【第三期】一文，里面發(fā)現(xiàn)一篇文章(Extending JavaScript – The Right Way)，覺得還不錯，翻譯過來跟大家共享，本文并不是逐字逐句進行翻譯，盡量說得通俗易懂。

原文地址：Extending JavaScript – The Right Way

以下是譯文

　　JavaScript已經(jīng)內(nèi)置了很多強大的方法，但有時你需要的某個功能在內(nèi)置的方法中沒有，我們怎么來優(yōu)雅地擴展JavaScript功能呢。
　　例如我們想增加一個capitalize()方法來實現(xiàn)首字母大寫，通常我們這樣寫：

復制代碼代碼如下:

 
if(!String.prototype.capitalize) 
{ 
String.prototype.capitalize = function() 
{ 
return this.slice(0,1).toUpperCase() + this.slice(1).toLowerCase(); 
} 
} 

　　上面的代碼可以正常使用，但如果在某個地方有下面的代碼：

復制代碼代碼如下:

 
var strings = "yay"; 
for(i in strings) console.log(i + ":" + strings[i]); 

　　我們得到的結果是這樣的：
0: y
1: a
2: y
capitalize: function () { return this.slice(0, 1).toUpperCase() + this.slice(1).toLowerCase(); }
　　這顯然不是我們想要的結果，輸出了我們增加的方法的原因是我們增加的方法的enumerable屬性默認為true。
　　我們可以通過簡單地把枚舉屬性(enumerable)設置為false避免這個問題，使用defineProperty方法進行功能的擴展：

復制代碼代碼如下:

 
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)在我們再運行這段代碼：

復制代碼代碼如下:

 
var strings = "yay"; 
for(i in strings) console.log(i + ":" + strings[i]); 

　　我們得到的結果是：
0: y
1: a
2: y
　　要注意的是，用循環(huán)沒有輸出的并不代表不存在，我們可以通過下面的代碼查看到定義：

復制代碼代碼如下:

 
var strings = "yay"; 
console.log(strings.capitalize) 

　　會輸出：

復制代碼代碼如下:

 
function () { return this.slice(0, 1).toUpperCase() + this.slice(1).toLowerCase(); } 

　　用這種方式擴展JavaScript功能比較靈活，我們可以用這種方式來定義我們自己的對象，并設置一些默認值。
　　以下是另外幾個擴展方法，你可以在自己的項目中使用：
　　String.pxToInt()
　　把"200px"這樣的字符串轉換為數(shù)字 200 :

復制代碼代碼如下:

 
if(!String.prototype.pxToInt) 
{ 
Object.defineProperty(String.prototype, 'pxToInt', 
{ 
value: function() 
{ 
return parseInt(this.split('px')[0]); 
}, 
enumerable: false 
}); 
} 

　　String.isHex()
　　判斷一個字符串是否是16進制表示的，如"#CCC" 或 "#CACACA"

復制代碼代碼如下:

 
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()
　　字符串反轉：

復制代碼代碼如下:

 
if(!String.prototype.reverse) 
{ 
Object.defineProperty(String.prototype, 'reverse', 
{ 
value: function() 
{ 
return this.split( '' ).reverse().join( '' ); 
}, 
enumerable: false 
}); 
} 

　　String.wordCount()
　　統(tǒng)計單詞數(shù)量，用空格分開

復制代碼代碼如下:

 
if(!String.prototype.wordCount) 
{ 
Object.defineProperty(String.prototype, 'wordCount', 
{ 
value: function() 
{ 
return this.split(' ').length; 
}, 
enumerable: false 
}); 
} 

　　String.htmlEntities()
　　html標簽如<和>編碼為特殊字符

復制代碼代碼如下:

 
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標簽：

復制代碼代碼如下:

 
if(!String.prototype.stripTags) 
{ 
Object.defineProperty(String.prototype, 'stripTags', 
{ 
value: function() 
{ 
return this.replace(/<\/?[^>]+>/gi, ''); 
}, 
enumerable: false 
}); 
} 

　　String.trim()
　　去掉首尾空格：

復制代碼代碼如下:

 
if(!String.prototype.trim) 
{ 
Object.defineProperty(String.prototype, 'trim', 
{ 
value: function() 
{ 
return this.replace(/^\s*/, "").replace(/\s*$/, ""); 
}, 
enumerable: false 
}); 
} 

　　String.stripNonAlpha()
　　去掉非字母字符：

復制代碼代碼如下:

 
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

復制代碼代碼如下:

 
if(!Object.prototype.sizeof) 
{ 
Object.defineProperty(Object.prototype, 'sizeof', 
{ 
value: function() 
{ 
var counter = 0; 
for(index in this) counter++; 
return counter; 
}, 
enumerable: false 
}); 
} 

　　這種方式擴展JS原生對象的功能還是挺不錯的，但除非必要(項目中用的很多)，不建議直接在原生對象上擴展功能，會造成全局變量污染。
　　另外，文中的pxToInt()方法是沒什么必要的，JS中的parseInt()可以直接完成這樣的功能：parsetInt("200px")===200
　　htmlEntities方法貌似有問題，下面另提供一個：

復制代碼代碼如下:

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