[总结贴] 十个 JavaScript 中易犯的小错误

时间 2019-12-04

原文原文链接

序言

在今天，JavaScript已经成为了网页编辑的核心。尤为是过去的几年，互联网见证了在SPA开发、图形处理、交互等方面大量JS库的出现。javascript

若是初次打交道，不少人会以为js很简单。确实，对于不少有经验的工程师，或者甚至是初学者而言，实现基本的js功能几乎毫无障碍。可是JS的真实功能却比不少人想象的要更加多样、复杂。JavaScript的许多细节规定会让你的网页出现不少意想不到的bug，搞懂这些bug，对于成为一位有经验的JS开发者很重要。java

常见错误一：对于this关键词的不正确引用

我曾经听一位喜剧演员说过：程序员

“我从未在这里，由于我不清楚这里是哪里，是除了那里以外的地方吗？”编程

这句话或多或少地暗喻了在js开发中开发者对于this关键字的使用误区。This指代的是什么？它和平常英语口语中的this是一个意思吗？安全

随着近些年js编程不断地复杂化，功能多样化，对于一个程序结构的内部指引、引用也逐渐变多起来闭包

下面让咱们一块儿来看这一段代码：app

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存储到一个变量当中，这样他就能够在不一样的环境背景中被继承下来：this

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

 var self = this;

this.timer = setTimeout(function(){     self.clearBoard();}, 0); };

第二种方法即是用bind()的方法，不过这个相比上一种要复杂一些，对于不熟悉bind()的同窗能够在微软官方查看它的使用方法：https://msdn.microsoft.com/zh-cn/library/ff841995

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

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

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

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

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

另外一种易犯的错误，即是带着其余编程语言的思惟，认为在JS中，也存在生命周期这么一说。请看下面的代码：

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

若是你认为在运行console.log() 时确定会报出 undefined 错误，那么你就大错特错了。我会告诉你其实它会返回 10吗。

固然，在许多其余语言当中，遇到这样的代码，确定会报错。由于i明显已经超越了它的生命周期。在for中定义的变量在循环结束后，它的生命也就结束了。可是在js中，i的生命还会继续。这种现象叫作 variable hoisting。

而若是咱们想要实现和其余语言同样的在特定逻辑模块中具备生命周期的变量，能够用let关键字。

常见错误三：内存泄露

内存泄露在js变成中几乎是一个没法避免的问题。若是不是特别细心的话，在最后的检查过程当中，确定会出现各类内存泄露问题。下面咱们就来举例说明一下：

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的定义是在一个闭包中进行的，而它又被其余的闭包所引用，js规定，在闭包中引入闭包外部的变量时，当闭包结束时此对象没法被垃圾回收（GC）。关于在JS中的内存泄露问题能够查看http://javascript.info/tutorial/memory-leaks#memory-management-in-java...

常见错误四:比较运算符

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操做

js中的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变成了。

咱们能够经过下面这段代码来实现真正正确的效果：

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

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

很大一部分的js开发者都不能彻底掌握原型的继承问题。下面具一个例子来讲明：

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'

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

咱们来看下面一段代码:

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”的优点：

让Debug更加容易：在正常模式下不少错误都会被忽视掉，“strict mode”模式会让Debug极致更加严谨。
防止默认的全局变量：在正常模式下，给一个为通过声明的变量命名将会将这个变量自动设置为全局变量。在strict模式下，咱们取消了这个默认机制。
取消this的默认转换：在正常模式下，给this关键字指引到null或者undefined会让它自动转换为全局。在strict模式下，咱们取消了这个默认机制。
防止重复的变量声明和参数声明：在strict模式下进行重复的变量声明会被抱错，如 (e.g., var object = {foo: "bar", foo: "baz"};) 同时，在函数声明中重复使用同一个参数名称也会报错，如 (e.g., function foo(val1, val2, val1){}),
让eval()函数更加安全。
当遇到无效的delete指令的过后报错：delete指令不能对类中未有的属性执行，在正常状况下这种状况只是默默地忽视掉，而在strict模式是会报错的。

结语

正如和其余的技术语言同样，你对JavaScript了解的的越深，知道它是如何运做，为何这样运做，你才会熟练地掌握而且运用这门语言。相反地，若是你缺乏对JS模式的认知的话，你就会碰上不少的问题。了解JS的一些细节上的语法或者功能将会有助于你提升编程的效率，减小变成中遇到的问题。

原文地址：http://www.toptal.com/javascript/10-most-common-javascript-mistakes
译文地址：http://1ke.co/course/136?utm_source=segment&utm_medium=1&utm_c...