?譯者 | 布加迪

審校 | 孫淑娟

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

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

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

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

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

2、不使用嚴(yán)格模式

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

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

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

"use strict";

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

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

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

這可能導(dǎo)致問題，因?yàn)楹苋菀谉o意中覆蓋全局作用域中的現(xiàn)有變量。比如說，如果您聲明一個(gè)與現(xiàn)有全局變量同名的變量，將覆蓋現(xiàn)有變量。

為了避免這種情況，確?？偸窃诤瘮?shù)內(nèi)部聲明變量。這將確保它們不被添加到全局作用域。

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

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

大多數(shù)情況下，您希望使用===操作符，因?yàn)樗鼑?yán)格。然而，在一些情況下==可能很有用。比如說，如果您在比較兩個(gè)可能不同類型的值，==就很有幫助，因?yàn)樗鼤?huì)在比較之前將值轉(zhuǎn)換成相同的類型。

5、記綁定this

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

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

這可能是個(gè)問題，因?yàn)楹茈y跟蹤this引用什么。為了避免這種情況，確保將this的值綁定到當(dāng)前對(duì)象?？梢酝ㄟ^使用bind方法來實(shí)現(xiàn)：

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

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

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

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

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

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

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

為了避免這種錯(cuò)誤，確保在修改現(xiàn)有字符串時(shí)創(chuàng)建了新字符串?？梢允褂胹lice方法來做到這一點(diǎn)：

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

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

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

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

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

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

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

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

為了避免這個(gè)錯(cuò)誤，確保刪除對(duì)不再需要的對(duì)象的引用。在上述例子中，我們可以使用clearInterval方法來做到這一點(diǎn)：

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

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

8、不使用IIFE

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

比如，以下列代碼為例：

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

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

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

為了避免這個(gè)錯(cuò)誤，確保在想要?jiǎng)?chuàng)建新作用域時(shí)使用IIFE。

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