?譯者 | 布加迪

審校 | 孫淑娟

說到編寫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。

原文鏈接：https://hackernoon.com/the-9-mistakes-javascript-developers-make-the-most