JavaScript中常见的10个BUG及其修复方法
2018-06-24 00:48:34来源：未知 阅读 ()
如今网站几乎100%使用JavaScript。JavaScript看上去是一门十分简单的语言，然而事实并不如此。它有很多容易被弄错的细节，一不注意就导致BUG。
1. 错误的对this进行引用
在闭包或则回调中，this关键字的作用域很容易弄错。举个例子：
|
Game.prototype.restart = function () {
this.clearLocalStorage();
this.timer = setTimeout(function() {
this.clearBoard(); // 此处this指的是?
}, 0);
};
|
如果执行上面的代码，我们会看到报错：
|
Uncaught TypeError: undefined is not a function
|
出错的原因在于：当你调用setTimeout函数，你实际上调用的是window.setTimeout()。在setTimeout中传入的匿名函数是在window这个对象环境下，所以this是指向window，但是window并没有clearBoard方法。
如何解决呢？定义新的变量引用指向Game对象的this，然后就可以使用啦。
|
Game.prototype.restart = function () {
this.clearLocalStorage();
var self = this; // 将this指向的对象绑定到self
this.timer = setTimeout(function(){
self.clearBoard();
}, 0);
};
|
或则使用bind()函数：
|
Game.prototype.restart = function () {
this.clearLocalStorage();
this.timer = setTimeout(this.reset.bind(this), 0); // bind to 'this'
};
Game.prototype.reset = function(){
this.clearBoard(); // 此处this的引用正确
};
|
还有一些JavaScript中错误的正确处理方式，欢迎点击参考阅读http://www.shsxt.com/it/html5/539.html。
2. 和块作用域(block scope)有关的BUG
在大多数程序语言中，每一个函数块都有一个独立的新的作用域，但是在JavaScript中并不是。例如：
|
for (var i = 0; i < 10; i++) {
/* ... */
}
console.log(i); // 会输出什么呢？
|
通常在这种情况下，调用console.log()会输出undefined或则报错。不过呢，这里会输出10。在JavaScript中，即使for循环已经结束，变量i依然存在，并且记录最后的值。有些开发者会忘记这一点，然后导致许多bug。我们可以使用let而不是for来杜绝这一问题。
3. 内存泄漏
你需要监控内存使用量，因为泄露很难避免。内存泄露可能由于引用不存在的对象或则循环引用导致。
- 如何避免：关注对象的可访问性(reachability)。
- 可访问的对象：
- 现有的call stack任何位置可以访问的对象
- 全局对象
当一个对象可以通过引用访问到，那么会在内存中保存。浏览器的垃圾回收器仅仅会把那些不可访问的对象回收。
4. 混淆的相等判断
JavaScript自动将所有在布尔环境下的变量类型转换为布尔类型，但是可能导致bug。举例：
|
// 所有都是true
console.log(false == '0');
console.log(null == undefined);
console.log(" \t\r\n" == 0);
console.log('' == 0);
// 注意：下面两个也是
if ({}) // …
if ([]) // …
|
{}和[]都是对象，他们都会被转换为true。为了防止bug出现，推荐使用===和!==来做比较，因为不会隐式做类型转换。
5. 低效的DOM操作
在JavaScript中，你可以轻松操作DOM(添加、修改和删除)，但是开发者往往很低效地去操作。这会导致bug出现，因为这些操作非常耗费计算资源。为了解决这个问题，推荐使用文档碎片(Document Fragment)，如果你需要操作多个DOM元素。
6. 在for循环中错误的定义函数
举例：
|
var elements = document.getElementsByTagName('input');
var n = elements.length; // 假设我们有10个元素
for (var i = 0; i < n; i++) {
elements[i].onclick = function() {
console.log("元素编号#" + i);
};
}
|
如果我们有10个元素，那么点击任何一个元素都会显示“元素编号#10”！因为在onclick被调用的时候，for循环已经结束，因此所有的i都是10。
解法：
|
var elements = document.getElementsByTagName('input');
var n = elements.length; // 假设有10个元素
var makeHandler = function(num) { // outer function
return function() { // inner function
console.log("元素编号##" + num);
};
};
for (var i = 0; i < n; i++) {
elements[i].onclick = makeHandler(i+1);
}
|
makeHandler在for循环执行的时候立即被调用，获取到当前的值i+1，并且存储在变量num中。makeHandler返回一个函数使用num变量，该函数被绑定到元素的点击事件。
7. 通过原型错误地继承
开发者如果没能正确理解继承的原理，那么就可能写出有bug的代码：
|
BaseObject = function(name) {
if(typeof name !== "undefined") {
this.name = name;
} else {
this.name = 'default'
}
};
var firstObj = new BaseObject();
var secondObj = new BaseObject('unique');
console.log(firstObj.name); // -> 输出'default'
console.log(secondObj.name); // -> 输出'unique'
|
但是，如果我们做如下操作：
|
delete secondObj.name;
|
那么：
|
console.log(secondObj.name); // -> 输出'undefined'
|
而我们实际上想要的结果是打印默认的name。
|
BaseObject = function (name) {
if(typeof name !== "undefined") {
this.name = name;
}
};
BaseObject.prototype.name = 'default';
|
每一个BaseObject都继承name属性，并且默认值为default。此时如果secondObj的name属性被删除掉，通过原型链查找会返回正确的默认值。
|
var thirdObj = new BaseObject('unique');
console.log(thirdObj.name); // -> 输出'unique'
delete thirdObj.name;
console.log(thirdObj.name); // -> 输出'default'
|
8. 实例方法中的无效引用
我们来实现一个简单的构造函数用来创建对象：
|
var MyObject = function() {}
MyObject.prototype.whoAmI = function() {
console.log(this === window ? "window" : "MyObj");
};
var obj = new MyObject();
|
为了使用方便，我们定义变量whoAmI来引用obj.whoAmI：
|
var whoAmI = obj.whoAmI;
|
打印出来看看：
|
console.log(whoAmI);
|
控制台会输出：
|
function () {
console.log(this === window ? "window" : "MyObj");
}
|
现在我们来对比一下两者调用的区别：
|
obj.whoAmI(); // 输出"MyObj" (和期望一致)
whoAmI(); // 输出"window" (竟然输出了window)
|
当我们把obj.whoAmI赋值给whoAmI的时候，这个新的变量whoAmI是定义在全局下，因此this指向全局的window，而不是MyObj。如果我们真的要获取对MyObj的函数的引用，需要在其作用域下。
|
var MyObject = function() {}
MyObject.prototype.whoAmI = function() {
console.log(this === window ? "window" : "MyObj");
};
var obj = new MyObject();
obj.w = obj.whoAmI; // 任然在obj的作用域
obj.whoAmI(); // 输出"MyObj"
obj.w(); // 输出"MyObj"
|
9. setTimeout/setInterval函数第一个参数误用字符串
如果你将一个字符串作为setTimeout/setTimeInterval，它会被传给函数构造函数并构建一个新的函数。该操作流程很慢而且低效，并导致bug出现。
|
var hello = function(){
console.log("hello, fundebug !");
}
setTimeout("hello", 1000);
|
一个好的替代方法就是传入函数作为参数：
|
setInterval(logTime, 1000); // 将logTime函数传入
setTimeout(function() { // 传入一个匿名函数
logMessage(msgValue);
}, 1000);
|
10. 未能成功使用strict mode
使用strict model会增加很多限制条件来加强安全和防止某些错误的出现，如果不使用strict mode，你就相当于少了一个得力的助手帮你避免错误：
- 更加容易debug
- 避免不小心定义了不该定义的全局变量
- 避免this隐式转换
- 避免属性名字或则参数值的重复使用
- eval()更加安全
- 无效地使用delete会自动抛出错误
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：浅析js的函数的按值传递参数
下一篇：图片加载完成再执行事件
- javascript面向对象入门基础详细介绍 2020-03-29
- JavaScript函数表达式详解及实例 2020-03-25
- 如何用javascript连接access数据库 2020-03-20
- js中去掉字串左右空格 2020-03-20
- Javascript中的经典技巧 2020-03-20
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
