十個JavaScript中易犯的小錯誤，你中了幾槍？

来源:http://www.cnblogs.com/shouce/archive/2016/04/11/5376954.html
-Advertisement-
Play Games

序言 在今天，JavaScript已經成為了網頁編輯的核心。尤其是過去的幾年，互聯網見證了在SPA開發、圖形處理、交互等方面大量JS庫的出現。 如果初次打交道，很多人會覺得js很簡單。確實，對於很多有經驗的工程師，或者甚至是初學者而言，實現基本的js功能幾乎毫無障礙。但是JS的真實功能卻比很多人想象 ...


序言

　　在今天，JavaScript已經成為了網頁編輯的核心。尤其是過去的幾年，互聯網見證了在SPA開發、圖形處理、交互等方面大量JS庫的出現。

　　如果初次打交道，很多人會覺得js很簡單。確實，對於很多有經驗的工程師，或者甚至是初學者而言，實現基本的js功能幾乎毫無障礙。但是JS的真實功能卻比很多人想象的要更加多樣、複雜。JavaScript的許多細節規定會讓你的網頁出現很多意想不到的bug，搞懂這些bug，對於成為一位有經驗的JS開發者很重要。

　　常見錯誤一：對於this關鍵詞的不正確引用

　　我曾經聽一位喜劇演員說過：

“我從未在這裡，因為我不清楚這裡是哪裡，是除了那裡之外的地方嗎？”

　　這句話或多或少地暗喻了在js開發中開發者對於this關鍵字的使用誤區。This指代的是什麼？它和日常英語口語中的this是一個意思嗎？

　　隨著近些年js編程不斷地複雜化，功能多樣化，對於一個程式結構的內部指引、引用也逐漸變多起來

　　下麵讓我們一起來看這一段代碼：

Game.prototype.restart = function () {   this.clearLocalStorage(); 

    this.timer = setTimeout(function(){     this.clearBoard();        }, 0);

 };

　　運行上面的代碼將會出現如下錯誤：

Uncaught TypeError: undefined is not a function

　　這是為什麼？this的調用和它所在的環境密切相關。之所以會出現上面的錯誤，是因為當你在調用 setTimeout()函數的時候, 你實際調用的是window.setTimeout(). 因此，在 setTimeout() 定義的函數其實是在window背景下定義的，而window中並沒有 clearBoard() 這個函數方法。

　　下麵提供兩種解決方案。第一種比較簡單直接的方法便是，把this存儲到一個變數當中，這樣他就可以在不同的環境背景中被繼承下來：

Game.prototype.restart = function () {   this.clearLocalStorage();  

    var self = this;

    this.timer = setTimeout(function(){     self.clearBoard();}, 0); };

　　第二種方法便是用bind()的方法，不過這個相比上一種要複雜一些，對於不熟悉bind()的同學可以在微軟官方查看它的使用方法：https://msdn.microsoft.com/zh-cn/library/ff841995

Game.prototype.restart = function () {   this.clearLocalStorage();  

    this.timer = setTimeout(this.reset.bind(this), 0); };      

Game.prototype.reset = function(){     this.clearBoard();};

　　上面的例子中，兩個this均指代的是Game.prototype。

　　常見錯誤二：傳統編程語言的生命周期誤區

　　另一種易犯的錯誤，便是帶著其他編程語言的思維，認為在JS中，也存在生命周期這麼一說。請看下麵的代碼：

for (var i = 0; i < 10; i++) {   /* ... */ } console.log(i);

　　如果你認為在運行console.log() 時肯定會報出 undefined 錯誤，那麼你就大錯特錯了。我會告訴你其實它會返回 10嗎。

　　當然，在許多其他語言當中，遇到這樣的代碼，肯定會報錯。因為i明顯已經超越了它的生命周期。在for中定義的變數在迴圈結束後，它的生命也就結束了。但是在js中，i的生命還會繼續。這種現象叫做 variable hoisting。

　　而如果我們想要實現和其他語言一樣的在特定邏輯模塊中具有生命周期的變數，可以用let關鍵字。

　　常見錯誤三：記憶體泄露

　　記憶體泄露在js變成中幾乎是一個無法避免的問題。如果不是特別細心的話，在最後的檢查過程中，肯定會出現各種記憶體泄露問題。下麵我們就來舉例說明一下：

var theThing = null; 

var replaceThing = function () {   

        var priorThing = theThing; 

        var unused = function () { 

                  if (priorThing) {       console.log("hi");     }   

       }; 

       theThing = {     longStr: new Array(1000000).join('*'),  // 

                  someMethod: function () {       console.log(someMessage);     }   
       }; 
};   
setInterval(replaceThing, 1000);

　　如果運行上面的代碼，你會發現你已經造成了大量的記憶體泄露，每秒泄露1M的記憶體，顯然光靠GC（垃圾回收器）是無法幫助你的了。由上面的代碼來看，似乎是longstr在每次replaceThing調用的時候都沒有得到回收。這是為什麼呢？

　　每一個theThing結構都含有一個longstr結構列表。每一秒當我們調用 replaceThing, 它就會把當前的指向傳遞給 priorThing. 但是到這裡我們也會看到並沒有什麼問題，因為 priorThing 每回也是先解開上次函數的指向才會接受新的賦值。並且所有的這一切都是發生在 replaceThing 函數體當中，按常理來說當函數體結束之後，函數中的本地變數也將會被GC回收，也就不會出現記憶體泄露的問題了，但是為什麼會出現上面的錯誤呢？

　　這是因為longstr的定義是在一個閉包中進行的，而它又被其他的閉包所引用，js規定，在閉包中引入閉包外部的變數時，當閉包結束時此對象無法被垃圾回收（GC）。關於在JS中的記憶體泄露問題可以查看http://javascript.info/tutorial/memory-leaks#memory-management-in-javascript

　　常見錯誤四:比較運算符

　　JavaScript中一個比較便捷的地方，便是它可以給每一個在比較運算的結果變數強行轉化成布爾類型。但是從另一方面來考慮，有時候它也會為我們帶來很多不便，下麵的這些例子便是一些一直困擾很多程式員的代碼實例：

console.log(false == '0'); 

console.log(null == undefined); 

console.log(" \t\r\n" == 0); 

console.log('' == 0);  // And these do too! 

if ({}) // ... 

if ([]) // ...

　　最後兩行的代碼雖然條件判斷為空（經常會被人誤認為轉化為false），但是其實不管是{ }還是[ ]都是一個實體類，而任何的類其實都會轉化為true。就像這些例子所展示的那樣，其實有些類型強制轉化非常模糊。因此很多時候我們更願意用 === 和 !== 來替代== 和 !=， 以此來避免發生強制類型轉化。. ===和!== 的用法和之前的== 和 != 一樣，只不過他們不會發生類型強制轉換。另外需要註意的一點是，當任何值與 NaN 比較的時候，甚至包括他自己，結果都是false。因此我們不能用簡單的比較字元來決定一個值是否為 NaN 。我們可以用內置的 isNaN() 函數來辨別:

console.log(NaN == NaN);    // false 

console.log(NaN === NaN);   // false 

console.log(isNaN(NaN));    // true

　　常見錯誤五：低效的DOM操作

　　js中的DOM基本操作非常簡單，但是如何能有效地進行這些操作一直是一個難題。這其中最典型的問題便是批量增加DOM元素。增加一個DOM元素是一步花費很大的操作。而批量增加對系統的花銷更是不菲。一個比較好的批量增加的辦法便是使用 document fragments ：

var div = document.getElementsByTagName("my_div");  

var fragment = document.createDocumentFragment(); 

 for (var e = 0; e < elems.length; e++) { fragment.appendChild(elems[e]); } div.appendChild(fragment.cloneNode(true));

　　直接添加DOM元素是一個非常昂貴的操作。但是如果是先把要添加的元素全部創建出來，再把它們全部添加上去就會高效很多。

　　常見錯誤6:在for迴圈中的不正確函數調用

　　請大家看以下代碼：

var elements = document.getElementsByTagName('input');

var n = elements.length; 

for (var i = 0; i < n; i++) {     

elements[i].onclick = function() {         

console.log("This is element #" + i);     }; }

　　運行以上代碼，如果頁面上有10個按鈕的話，點擊每一個按鈕都會彈出 “This is element #10”! 。這和我們原先預期的並不一樣。這是因為當點擊事件被觸發的時候，for迴圈早已執行完畢，i的值也已經從0變成了。

　　我們可以通過下麵這段代碼來實現真正正確的效果：

var elements = document.getElementsByTagName('input'); 

var n = elements.length; 

var makeHandler = function(num) {  // outer function

      return function() { 

console.log("This is element #" + num);      }; }; 

for (var i = 0; i < n; i++) 

{     elements[i].onclick = makeHandler(i+1); }

　　在這個版本的代碼中， makeHandler 在每回迴圈的時候都會被立即執行，把i＋1傳遞給變數num。外面的函數返回裡面的函數，而點擊事件函數便被設置為裡面的函數。這樣每個觸發函數就都能夠是用正確的i值了。

　　常見錯誤7:原型繼承問題

　　很大一部分的js開發者都不能完全掌握原型的繼承問題。下麵具一個例子來說明：

BaseObject = function(name) {     

if(typeof name !== "undefined") 

{         this.name = name;     } 

else 

{         this.name = 'default'     } };

　　這段代碼看起來很簡單。如果你有name值，則使用它。如果沒有，則使用 ‘default’:

var firstObj = new BaseObject(); 

var secondObj = new BaseObject('unique');  

console.log(firstObj.name);  // -> 結果是'default' 

console.log(secondObj.name); // -> 結果是 'unique'

　　但是如果我們執行delete語句呢:

delete secondObj.name;

　　我們會得到:

console.log(secondObj.name); // -> 結果是 'undefined'

　　但是如果能夠重新回到 ‘default’狀態不是更好麽? 其實要想達到這樣的效果很簡單，如果我們能夠使用原型繼承的話:

BaseObject = function (name) 

{     if(typeof name !== "undefined") 

{         this.name = name;     } };  

BaseObject.prototype.name = 'default';

　　在這個版本中, BaseObject 繼承了原型中的name 屬性, 被設置為了 'default'.。這時，如果構造函數被調用時沒有參數，則會自動設置為 default。相同地，如果name 屬性被從BaseObject移出，系統將會自動尋找原型鏈，並且獲得 'default'值：

 var thirdObj = new BaseObject('unique'); 

 console.log(thirdObj.name);  

 delete thirdObj.name;

 console.log(thirdObj.name);  // -> 結果是 'default'

　　常見錯誤8:為實例方法創建錯誤的指引

　　我們來看下麵一段代碼:

var MyObject = function() {} 

 MyObject.prototype.whoAmI = function() {     

console.log(this === window ? "window" : "MyObj"); }; 

 var obj = new MyObject();

　　現在為了方便起見，我們新建一個變數來指引 whoAmI 方法, 因此我們可以直接用 whoAmI() 而不是更長的obj.whoAmI():

var whoAmI = obj.whoAmI;

　　接下來為了確保一切都如我們所預測的進行，我們可以將 whoAmI 列印出來:

console.log(whoAmI);

　　結果是：

function () {     console.log(this === window ? "window" : "MyObj"); }

　　沒有錯誤！

　　但是現在我們來查看一下兩種引用的方法：

obj.whoAmI();  // 輸出 "MyObj" (as expected) 

whoAmI();      // 輸出 "window" (uh-oh!)

　　哪裡出錯了呢？

　　原理其實和上面的第二個常見錯誤一樣，當我們執行 var whoAmI = obj.whoAmI;的時候，新的變數 whoAmI 是在全局環境下定義的。因此它的this 是指window, 而不是obj！

　　正確的編碼方式應該是：

var MyObject = function() {}  

MyObject.prototype.whoAmI = function() {     

      console.log(this === window ? "window" : "MyObj"); }; 

var obj = new MyObject(); 

obj.w = obj.whoAmI;   // still in the obj namespace  obj.whoAmI();  // 輸出 "MyObj" (as expected) 

obj.w();       // 輸出 "MyObj" (as expected)

　　常見錯誤9:用字元串作為setTimeout 或者 setInterval的第一個參數

　　首先我們要聲明，用字元串作為這兩個函數的第一個參數並沒有什麼語法上的錯誤。但是其實這是一個非常低效的做法。因為從系統的角度來說，當你用字元串的時候，它會被傳進構造函數，並且重新調用另一個函數。這樣會拖慢程式的進度。

setInterval("logTime()", 1000); 

setTimeout("logMessage('" + msgValue + "')", 1000);

　　另一種方法是直接將函數作為參數傳遞進去：

setInterval(logTime, 1000);   

setTimeout(function() { 

logMessage(msgValue); }, 1000);

　　常見錯誤10:忽略 “strict mode”的作用

 　　“strict mode” 是一種更加嚴格的代碼檢查機制，並且會讓你的代碼更加安全。當然，不選擇這個模式並不意味著是一個錯誤，但是使用這個模式可以確保你的代碼更加準確無誤。

　　下麵我們總結幾條“strict mode”的優勢：

　　1. 讓Debug更加容易：在正常模式下很多錯誤都會被忽視掉，“strict mode”模式會讓Debug極致更加嚴謹。

　　2. 防止預設的全局變數：在正常模式下，給一個為經過聲明的變數命名將會將這個變數自動設置為全局變數。在strict模式下，我們取消了這個預設機制。

　　3. 取消this的預設轉換：在正常模式下，給this關鍵字指引到null或者undefined會讓它自動轉換為全局。在strict模式下，我們取消了這個預設機制。

　　4. 防止重覆的變數聲明和參數聲明：在strict模式下進行重覆的變數聲明會被抱錯，如(e.g., var object = {foo: "bar", foo: "baz"};) 同時，在函數聲明中重覆使用同一個參數名稱也會報錯，如 (e.g., function foo(val1, val2, val1){}),

　　5. 讓eval()函數更加安全。

　　6. 當遇到無效的delete指令的事後報錯：delete指令不能對類中未有的屬性執行，在正常情況下這種情況只是默默地忽視掉，而在strict模式是會報錯的。

　　結語

　　正如和其他的技術語言一樣，你對JavaScript瞭解的的越深，知道它是如何運作，為什麼這樣運作，你才會熟練地掌握並且運用這門語言。相反地，如果你缺少對JS模式的認知的話，你就會碰上很多的問題。瞭解JS的一些細節上的語法或者功能將會有助於你提高編程的效率，減少變成中遇到的問題。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 大數據架構培訓 視頻教程 Hadoop HBase Hive Storm Spark Sqoop Flume ZooKeeper Kafka Redis 雲計算
    培訓大數據架構開發！ 從零基礎到高級，一對一培訓！[技術QQ：2937765541] 課程體系： 獲取視頻資料和培訓解答技術支持地址 課程展示(大數據技術很廣，一直線上為你培訓解答！)： 獲取視頻資料和培訓解答技術支持地址 ...
  • Atiti。流量提升軟體設計大綱規劃 v1 q45
    Atiti。流量提升軟體設計大綱規劃 v1 q45 1. 通用數據管理1 2. 網頁Url管理模塊1 3. 網站domain管理1 4. ad廣告管理2 5. Task任務管理2 6. 任務執行功能：：進入網站，隨機瀏覽網頁2 7. 系統設置2 8. 界面跨平臺h52 9. 開發語言java+h53 ...
  • atitit.userService 用戶系統設計 v5 q330
    atitit.userService 用戶系統設計 v5 q330 1. 新特性1 2. Admin login1 3. 用戶註冊登錄2 3.1. <!-- 會員註冊使用 --> 商家註冊2 3.2. <!-- 會員登錄使用 -->3 3.3. <!-- 會員退出登錄 -->3 3.4. <!-- ...
  • Java設計模式開篇
    在所有的設計模式開篇中，總是說一個好的架構，或多或少都會有設計模式的出現。當然或多或少也會使用設計模式的相關原則： SOLID+迪米爾原則 1.優化代碼的第一步：單一職責原則 S:單一職責鏈原則：英文名稱為Single Responsibility Principle（SRP） 定義：就一個類而言， ...
  • 架構搭建----基於DDD領域驅動設計的WCF+EF+WPF分層框架（2）
    寫在最前面：轉載請註明出處 目錄置頂： 關於項目 基於DDD領域驅動設計的WCF+EF+WPF分層框架（1） 架構搭建 基於DDD領域驅動設計的WCF+EF+WPF分層框架（2） WCF服務端具體實現 基於DDD領域驅動設計的WCF+EF+WPF分層框架（3） WCF客戶端配置以及代理 基於DDD領 ...
  • 10最好的開放源移動工具的工作場所
    移動設備已經成為在任何時間的一部分工作。在小型和中型組織人員使用個人平板電腦和智能手機業務。開源社區在這個移動應用工作的增長起到了關鍵作用。有許多開放源代碼的應用程式，可以幫助提高你的創造力。今天我們所列舉的10大開源工具，你會在工作中找到有用的。 1.Convertigo 這是用於開發和部署應用程 ...
  • html5+css3方式實現mobie app的一些瓶頸
    PC的早期階段，也是傳統的C/S模式居多，後進化到B/S模式，並產生了SaaS、雲計算等概念和應用。從客戶端進化到瀏覽器最大好處是客戶端無需更新，減少了大量的更新成本，只需伺服器端進行更新。這也是為什麼現在流行webQQ, google docs, photoshop網頁版的原因。現在同時很多軟體廠 ...
  • jQuery 事件處理
    瀏覽器的事件模型 DOM第0級事件模型 他的屬性提供了關於當前正被處理的已觸發事件的大量信息。這包括一些細節，比如在哪個元素上觸發的事件、滑鼠事件的坐標以及鍵盤事件中單擊了哪個鍵。 當觸發 dom 樹中一個元素上的事件時，事件模型會檢查這個元素是否已經創建了特定的事件處理器。如果是，就會調用已創建的 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類