JavaScript开发中常见的错误与陷阱解析

作者:半夏

时间:2026-10-21

浏览:183

本文总结了JavaScript开发中常见的四类错误:this关键字在不同作用域下的指向问题、变量声明提前的生命周期误区、闭包导致的内存泄漏以及比较运算符的隐式转换陷阱。通过具体代码示例,分析了错误成因并提供如bind()、let关键字等解决方案,帮助开发者避免常见陷阱。

文章目录

this关键字的作用域问题

1. 对this关键字的不当使用


Game.prototype.restart = function () { 
this.clearLocalStorage(); 
this.timer = setTimeout (function() { 
this.clearBoard(); 
}, 0); 
};

运行上述代码将触发如下报错信息:


uncaught typeError:undefined is not a function

产生该错误的原因在于,this关键字代表当前执行上下文中的对象,其值取决于调用环境。在示例中,setTimeout函数实际上被window对象调用,而window对象中并不存在clearBoard()方法,从而导致引用错误。

针对此问题,提供两种解决方案。

方案一:将当前对象引用存储在一个局部变量中,从而在不同作用域间共享该引用。


Game.prototype.restart = function() { 
this.clearLocalStorage(); 
var self = this; 
this.timer = setTimeout(function(){ 
self.clearBoard(); }, 0); 
}; //改变了作用的对象 

方案二:使用bind()方法。该方法相对复杂,官方文档说明可参考msdn.microsoft.com/zh-cn/library/ff841995。


Game.prototype.restart = function () { 
this.clearLocalStorage(); 
this.timer = setTimeout(this.reset.bind(this)), 
}; 
Game.prototype.reset = function() { 
this.clearBoard(); 
};

变量生命周期与声明提前

2. 传统编程语言生命周期概念的误区

JavaScript中变量的生命周期与其他传统编程语言存在差异,具体表现如下例所示:


for (var i=0; i<10;i++){ 
/* */ 
} 
console.log(i); //并不会提示 未定义,结果是10 

在JavaScript中,这种现象被称为variable hoisting(声明提前)。

可以通过使用let关键字来避免此类问题。

内存泄漏与闭包陷阱

3. 内存泄漏问题

在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);

执行该段代码会导致大量内存泄漏,仅依靠垃圾回收机制(garbage collector)无法完成回收。原因在于代码中存在一个创建数组对象的闭包,该闭包对象又被另一个外层闭包引用。根据JavaScript语法规定,当内部闭包引用外部变量时,即使内部闭包结束执行,其所引用的外部对象也无法被回收。

比较运算符的隐式转换

4. 比较运算符的使用陷阱


console.log(false == ‘0'); // true 
console.log(null == undefinded); //true 
console.log(” \t\r\n” == 0);

以上所述是小编给大家介绍的JavaScript中日常收集常见的10种错误(推荐),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章