全文共2976字，預計學習時長
6分鐘
1. 編寫構造函數時，在 .prototype上添加方法
根據我頭兩年接觸JavaScript的經歷，如果你是一名JavaScript新手，可能會對這部分有些陌生。
（請記住，這並不適用於類，因為類已經將方法附加到它們的prototype上。）
以下是構造函數的一個示例：
<code>functionFrog(name, gender) {/<code><code> this.name= name/<code>
<code> this.gender= gender/<code>
<code>}/<code>
<code>Frog.prototype.leap=function(feet) {/<code><code> console.log(`Leaping ${feet}ft into the air`)/<code><code>}/<code>
為什麼不像以下示例一樣，直接附加leap方法呢？
<code>functionFrog(name, gender) {/<code><code> this.name= name/<code>
<code> this.gender= gender/<code>
<code> this.leap=function(feet) {/<code><code> console.log(`Leaping ${feet}ft into the air`)/<code><code> }/<code>
<code>}/<code>
當把方法直接添加到prototype時，它們將在構造函數創建的所有實例之間共享。
換句話說，使用上個例子，如果創建三個獨立的 Frog (從 this.leap = function() {...})，然後以創建三個獨立的副本結束。這是一個問題，因為leap方法總是保持不變，不需要在實例上建立自己的副本。
最終導致本可以避免的性能下降。this.name 和this.gender屬性需要在實例上定義，因為現實生活中，frog可能有自己的名字和性別，所以才在實例級別上創建它們。
這裡是流行的request 包使用這種方法的一個示例（在GitHub上）。
2. 使用TypeScript
TypeScript不僅能為類型安全提供強大防禦，還能幫助預防錯誤，已經在JavaScript社區中得到了廣泛應用。
使用TypeScript能使編譯器在代碼運行之前對潛在的錯誤進行監測並顯示警告。
但這還遠不能解釋為什麼TypeScript可以適用於任何情況。TypeScript最好的一點是允許在主流瀏覽器支持之前使用JavaScript中的新特徵，因為這些特徵被編譯成更早期的JavaScript版本，因此能在舊版本的瀏覽器中運行。
3. 編寫測試
如果要認真處理一個項目，必須使用測試，這樣應用程序才更能夠更加可預測、少出錯、並靈活應對未來的變化。換句話說，如果打算做一個經得起時間考驗的項目，沒有比在整個代碼中建立測試更好的方法。在代碼中投入的測試越多，將其應用於生產環境後，對它的信心也會越多。
測試最好的部分是什麼？是能捕捉錯誤，使其無從出現——有人不想要那種能力嗎？我確定我想要。這就是我在項目中寫單元測試的原因。
4. 使用JSON.parse或JSON.stringify時，務必考慮使用 try/catch
JavaScript中，當把JSON作為輸入傳遞給JSON.parse時，需要一個正確格式的JSON作為第一個參數。如果格式不正確，會提示JSON解析錯誤。
來自JSON解析錯誤的危險是接受無效的JSON會導致應用程序崩潰。最近我們的一個web項目失敗了，因為另一個內置程序包沒有在try/catch裡安裝JSON.parse 。最終導致了web頁面失效，而且由於JavaScript運行時被破壞，除非內置程序包修復它，否則無法修正錯誤。
<code>SyntaxError: Unexpected token }in JSON at position 107/<code>
不應總是期望有效的JSON輸入，因為它會收到如“>”的奇怪字符，這在今天是很常見的。
5. 使用常規的.type屬性進行區分
這個方法很棒，得到了廣泛使用。React開發人員可能每天都能看到這種做法，特別是使用Redux工作時。
使用類似方法也能使開發流程變得無比簡單，因為它甚至可以很好的記錄自己。
<code>functioncreateSpecies(type, name, gender) {/<code><code> if (type ==='frog') {/<code><code> returncreateFrog(name, gender)/<code>
<code> } elseif (type ==='human') {/<code><code> returncreateHuman(name, gender)/<code>
<code> } elseif (type == undefined) {/<code><code> thrownewError('Cannot create a species with an unknown type')/<code><code> }/<code>
<code>}/<code>
<code>const myNewFrog =createSpecies('frog', 'sally', 'female')/<code>6. 使用工廠函數（factory function）
如果你不知道什麼是工廠函數，那麼它就是一個返回對象的函數（它既不是類，也不是構造函數）。通過這個簡單概念，就可以利用JavaScript及其特徵來創建強大健壯的應用程序。
必須知道，當函數被new關鍵字調用時，該函數就不再是工廠函數了。
為什麼要用工廠函數？
使用工廠函數可以輕鬆的生成對象實例，且無需涉及類或new關鍵字。
其本質上意味著，它們最終會被當做函數來對待，即可用於組合對象、函數，甚至Promise函數。這表明可以將工廠函數混合搭配，以創建一個升級版工廠函數，然後繼續和別的函數或對象組合創建成更強的工廠函數。其可能性是無窮無盡的。
考慮到這一點，將其與好的代碼實踐相結合，它便開始大放光彩了。
以下是工廠函數的一個簡單示例：
<code>functioncreateFrog(name) {/<code><code> const children = []/<code>
<code> return {/<code><code> addChild(frog) {/<code><code> children.push(frog)/<code>
<code> },/<code>
<code> }/<code>
<code>}/<code>
<code>const mikeTheFrog =createFrog('mike')/<code>當使用足夠多的工廠函數後，會意識到工廠函數比類構造函數有更強的可重用性。這減少了代碼量，縮短了代碼重構時間(因為工廠函數最終會返回任意對象)，縮短了從一個代碼到另一個代碼的管理時間。
7. 使函數儘可能的簡單
眾所周知，在JavaScript中很可能有同時做很多事情的大型函數。
編程新手可能覺得這是一件好事——之前當我寫了很大篇幅可以工作的代碼後，我的自我感覺非常好。這對我來說很重要，並給予我很大信心。畢竟它能正常運行，我就把自己的代碼有多麼冗長這件事拋之腦後了。天哪，當時太幼稚了。
如果想寫更易維護的、簡單的、少出錯的代碼，最好使它儘量簡潔短小。代碼越簡潔，單獨測試也會越容易。
如果你更喜歡函數式編程範式，這一點尤其重要。函數執行一件事就應該把它做好，這是常識。
希望對你有用，獲得更完美的JavaScript的最佳實踐。
我們一起分享AI學習與發展的乾貨
閱讀更多 讀芯術 的文章
