譯者 | 布加迪

　　說到編寫JavaScript，有幾個錯誤是開發人員常犯的。本文介紹幾個最常見的JavaScript錯誤以及如何避免它們。

　　1、誤用this關鍵字

　　開發人員在使用JavaScript時最常犯的錯誤之一是誤用this關鍵字。this關鍵字引用當前代碼執行的環境對象。這個對象可以是全局對象、DOM元素或任何其他對象。在大多數情況下，this關鍵字引用當前代碼執的環境對象。

　　然而，在一些情況下this關鍵字可能被誤用。一個常見的錯誤是在嵌套函數中使用this關鍵字。在這里，this關鍵字將引用全局對象，而不是代碼執行的環境對象。

　　為了避免這個錯誤，確保僅在引用當前代碼執行的環境對象時才使用this關鍵字。

　　2、不使用嚴格模式

　　開發人員常犯的另一個錯誤是不使用嚴格模式。嚴格模式是一種選擇加入受限制的JavaScript變體的方法。在嚴格模式下，不允許某種語法，某些行為被更改。

　　比如說，在嚴格模式下，不能使用未聲明的變量。

　　嚴格模式在默認情況下未啟用，所以您必須選擇啟用它。為此，您可以在JavaScript文件的頂部添加以下代碼行：

　　"use strict";

　　添加這行代碼后，您告訴JavaScript引擎為后面的代碼啟用嚴格模式。

　　3、在全局作用域中聲明變量

　　嚴格模式的主要用途之一是防止在全局作用域中聲明變量。在JavaScript中，全局作用域是默認作用域。這意味著在函數外部聲明的任何變量都自動被添加到全局作用域。

　　這可能導致問題，因為很容易無意中覆蓋全局作用域中的現有變量。比如說，如果您聲明一個與現有全局變量同名的變量，將覆蓋現有變量。

　　為了避免這種情況，確�？偸窃诤瘮祪炔柯暶髯兞俊＿@將確保它們不被添加到全局作用域。

　　4、使用==而不是===

　　在JavaScript中，有兩種方法來檢查兩個值是否相等：==和===。==操作符檢查值是否相等，而===操作符檢查值和類型是否相等。

　　大多數情況下，您希望使用===操作符，因為它更嚴格。然而，在一些情況下==可能很有用。比如說，如果您在比較兩個可能不同類型的值，==就很有幫助，因為它會在比較之前將值轉換成相同的類型。

　　5、記綁定this

　　在使用JavaScript的面向對象特性時，您常常需要在方法內部引用當前對象。為此，應使用this關鍵字。

　　然而，this的值可以根據調用方法的方式進行改變。比如說，如果您在一個對象上調用一個方法，this將引用該對象。但如果您使用另一個對象調用相同的方法，this將轉而引用該對象。

　　這可能是個問題，因為很難跟蹤this引用什么。為了避免這種情況，確保將this的值綁定到當前對象。可以通過使用bind方法來實現：

　　復制

　　var obj = {

　　foo: function() {

　　console.log(this);

　　}

　　};

　　var bar = obj.foo.bind(obj);

　　bar(); // prints the obj object

　　在上述代碼中，我們用foo方法創建了一個對象。然后，我們創建一個名為bar的新變量，并將其設置為在foo上調用bind的結果。這將foo中的this的值設置為obj對象。當我們調用bar時，它將obj打印輸出到控制臺。

　　6、修改字符串而不是創建新的字符串

　　在JavaScript中，字符串是不可變的。這意味著一旦創建了字符串，就不能更改它。

　　然而，有幾個方法可以用來修改字符串。比如說，replace方法可用于將字符串的一部分替換成另一個字符串。

　　復制

　　var str = "Hello world!";

　　str.replace(" world", " JavaScript"); // returns "Hello JavaScript!"

　　replace方法實際上并不修改原始字符串，只是返回經過修改的新字符串。記住這一點很重要，因為當您打算創建新字符串時，很容易無意中修改字符串。

　　為了避免這種錯誤，確保在修改現有字符串時創建了新字符串。可以使用slice方法來做到這一點：

　　復制

　　var str = "Hello world!";

　　var newStr = str.slice(0, 5) + " JavaScript!"; // returns "Hello JavaScript!"

　　在上述代碼中，我們使用slice方法來創建新字符串，其中含有原始字符串的前五個字符。然后我們將其與字符串“JavaScript!”連接起來，這創建了一個新字符串，我們可以將其賦予給newStr變量。

　　7、導致內存泄漏

　　內存泄漏是用JavaScript編程時可能發生的問題。當您堅持引用不再需要的對象時，就會出現這種情況。

　　比如說，以下列代碼為例：

　　復制

　　var arr = [1, 2, 3, 4, 5];

　　var foo = function() {

　　arr.push(6);

　　};

　　setInterval(foo, 1000);

　　在上述代碼中，我們創建了一個數組和一個往數組添加新元素的函數。然后，我們設置一個計時器，每秒鐘調用一次函數。

　　這段代碼將導致內存泄漏，因為arr數組永遠不會被垃圾回收。這是由于foo函數引用arr數組，foo函數每秒鐘都被調用一次。

　　為了避免這個錯誤，確保刪除對不再需要的對象的引用。在上述例子中，我們可以使用clearInterval方法來做到這一點：

　　復制

　　var arr = [1, 2, 3, 4, 5];

　　var foo = function() {

　　arr.push(6);

　　};

　　var interval = setInterval(foo, 1000);

　　clearInterval(interval);

　　在上述代碼中，我們將setInterval的返回值存儲在一個變量中。這個返回值是對已創建的間隔時間的引用。然后可以使用clearInterval方法來清除間隔時間，并刪除對arr數組的引用。

　　8、不使用IIFE

　　IIFE(立即調用的函數表達式)是一個立即執行的函數。IIFE通常在JavaScript中用于創建本地作用域。

　　比如，以下列代碼為例：

　　復制

　　var foo = "foo";

　　(function() {

　　var foo = "bar";

　　})();

　　console.log(foo); // prints "foo"

　　在上述代碼中，我們有一個名為foo的全局變量，其值為“foo”。然后我們創建一個具有同名的局部變量的IIFE。這個局部變量只能在IIFE內部訪問。

　　當我們將foo的值記錄到控制臺時，它會輸出“foo”。這是由于IIFE創建了一個與全局作用域不同的新作用域。

　　為了避免這個錯誤，確保在想要創建新作用域時使用IIFE。