10个JavaScript开发中常见的陷阱与避坑指南

JavaScript开发中的常见陷阱概述

如今，JavaScript已成为网页开发的核心技术。特别是在近几年的发展中，互联网领域涌现出大量用于单页应用（SPA）开发、图形处理及交互效果的JS库。

初次接触JavaScript的人往往觉得它很简单。对于资深工程师甚至初学者来说，实现基础功能通常没有太大障碍。然而，JavaScript的实际功能远比许多人想象的多样且复杂。许多细微的语言规范可能导致网页出现意想不到的Bug。深入理解这些陷阱，对于成长为一名成熟的JavaScript开发者至关重要。

this关键字的误用与解决方案

常见错误一：对this关键字的误用

曾有一位喜剧演员说过：

“我从未在这里，因为我不清楚这里是哪里，是除了那里之外的地方吗？”

这句话隐喻了JavaScript开发中开发者对this关键字使用的困惑。this到底指代什么？它与日常口语中的this含义相同吗？

随着JavaScript编程日益复杂和功能多样化，程序内部的结构指引和引用也变得越来越频繁。

让我们来看一段代码：

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()，但这比第一种方法稍显复杂。

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

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

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

在上面的例子中，两个this均指向Game.prototype。

变量提升与生命周期误区

常见错误二：传统编程语言的生命周期误区

另一种易犯的错误是带着其他编程语言的思维，认为JavaScript中也存在生命周期这一概念。请看以下代码：

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

如果你认为运行console.log()时会报出undefined错误，那就大错特错了。实际上它会返回10。

当然，在许多其他语言中，遇到这样的代码肯定会报错，因为变量i显然已经超出了其生命周期。在for循环中定义的变量在循环结束后，其生命也就结束了。但在JavaScript中，i的生命会继续存在。这种现象被称为变量提升（variable hoisting）。

如果我们希望实现与其他语言相同的、在特定逻辑模块中具有生命周期的变量，可以使用let关键字。

内存泄漏的成因与闭包影响

常见错误三：内存泄漏

内存泄漏在JavaScript编程中几乎是一个难以完全避免的问题。如果不特别细心，在最后的检查过程中，肯定会出现各种内存泄漏问题。下面我们来举例说明：

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的定义是在一个闭包中进行的，而它又被其他的闭包所引用。JavaScript规定，在闭包中引入闭包外部的变量时，当闭包结束时此对象无法被垃圾回收（GC）。

比较运算符与类型强制转换

常见错误四：比较运算符

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操作与批量添加技巧

常见错误五：低效的DOM操作

JavaScript中的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元素是一个非常昂贵的操作。但是如果是先把要添加的元素全部创建出来，再把它们全部添加上去就会高效很多。

循环中的函数调用与闭包陷阱

常见错误六：在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变成了10。

我们可以通过下面这段代码来实现真正正确的效果：

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值了。

原型继承与属性删除问题

常见错误七：原型继承问题

很大一部分的JavaScript开发者都不能完全掌握原型的继承问题。下面具一个例子来说明：

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' 

实例方法引用与this指向错误

常见错误八：为实例方法创建错误的指引

我们来看下面一段代码:

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) 

定时器参数与严格模式的重要性

常见错误九：用字符串作为setTimeout或者setInterval的第一个参数

首先我们要声明，用字符串作为这两个函数的第一个参数并没有什么语法上的错误。但是其实这是一个非常低效的做法。因为从系统的角度来说，当你用字符串的时候，它会被传进构造函数，并且重新调用另一个函数。这样会拖慢程序的进度。

setInterval("logTime()", 1000); 

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

另一种方法是直接将函数作为参数传递进去：

setInterval(logTime, 1000);  

setTimeout(function() { 

logMessage(msgValue); }, 1000); 

常见错误十：忽略“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的一些细节上的语法或者功能将会有助于你提高编程的效率，减少编程中遇到的问题。