?譯者 | 布加迪

審校 | 孫淑娟

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

1、誤用this關(guān)鍵字

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

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

為了避免這個錯誤，確保僅在引用當(dāng)前代碼執(zhí)行的環(huán)境對象時才使用this關(guān)鍵字。

2、不使用嚴格模式

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

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

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

"use strict";

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

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

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

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

為了避免這種情況，確保總是在函數(shù)內(nèi)部聲明變量。這將確保它們不被添加到全局作用域。

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

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

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

5、記綁定this

在使用JavaScript的面向?qū)ο筇匦詴r，您常常需要在方法內(nèi)部引用當(dāng)前對象。為此，應(yīng)使用this關(guān)鍵字。

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

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

var obj = {
foo: function() {
console.log(this);
}
};
var bar = obj.foo.bind(obj);
bar(); // prints the obj object

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

6、修改字符串而不是創(chuàng)建新的字符串

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

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

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

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

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

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

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

7、導(dǎo)致內(nèi)存泄漏

內(nèi)存泄漏是用JavaScript編程時可能發(fā)生的問題。當(dāng)您堅持引用不再需要的對象時，就會出現(xiàn)這種情況。

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

var arr = [1, 2, 3, 4, 5];
var foo = function() {
arr.push(6);
};
setInterval(foo, 1000);

在上述代碼中，我們創(chuàng)建了一個數(shù)組和一個往數(shù)組添加新元素的函數(shù)。然后，我們設(shè)置一個計時器，每秒鐘調(diào)用一次函數(shù)。

這段代碼將導(dǎo)致內(nèi)存泄漏，因為arr數(shù)組永遠不會被垃圾回收。這是由于foo函數(shù)引用arr數(shù)組，foo函數(shù)每秒鐘都被調(diào)用一次。

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

var arr = [1, 2, 3, 4, 5];
var foo = function() {
arr.push(6);
};
var interval = setInterval(foo, 1000);
clearInterval(interval);

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

8、不使用IIFE

IIFE（立即調(diào)用的函數(shù)表達式）是一個立即執(zhí)行的函數(shù)。IIFE通常在JavaScript中用于創(chuàng)建本地作用域。

比如，以下列代碼為例：

var foo = "foo";
(function() {
var foo = "bar";
})();
console.log(foo); // prints "foo"

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

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

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

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