为什么你写的 JS 总是报错？五个最常见的坑

编程知识
发表时间：2025-11-28 07:44


刚开始写 JavaScript 时，经常会遇到各种奇怪的报错：
undefined is not a function、Cannot read property 'xxx' of null、SyntaxError…

其实 80% 的错误都来自几个常见的低级问题。
这篇文章帮你一次性解决它们，让你的代码不再“见一次错一次”。

1）变量没声明就直接用

JavaScript 虽然很宽容，但不声明变量直接用一定会出错。

❌ 错误示例

 
count += 1

✔ 正确写法

 
let count = 0 count += 1

2）DOM 元素没加载就访问

网页还没渲染完就访问元素，会报 null 或 undefined。

❌ 错误示例

 
const btn = document.getElementById("login-btn") btn.addEventListener("click", () => {})

✔ 正确写法（等页面加载）

 
document.addEventListener("DOMContentLoaded", () => { const btn = document.getElementById("login-btn") btn.addEventListener("click", () => {}) })

3）路径写错 / 文件没引入

最常见：写了 JS，但网页没加载，就永远不会执行。

❌ 错误示例

 
<script src="js/main.js"></script>

但你的文件其实在：

 
/static/js/main.js

✔ 正确做法

永远在浏览器里看 Console 有没有 404。

4）对象 / 数组访问越界

访问不存在的属性也会报错。

❌ 错误

 
const user = {} console.log(user.name.length) // 报错

✔ 正确

 
console.log(user.name?.length)

5）this 被你玩坏了

初学者最容易搞错的就是 this。

❌ 错误示例

 
button.onclick = function() { this.innerText = "Clicked" } setTimeout(() => { this.innerText = "???" // this 指向 window，不是 button }, 1000)

✔ 正确写法（保存 this）

 
button.onclick = function() { const self = this setTimeout(() => { self.innerText = "Clicked After 1s" }, 1000) }

简单总结

JS 报错最多来自：

把这 5 个搞懂，你的报错会少 70%。

分享：
常见问题

答：打开浏览器控制台（F12） → Console → 看第一行红字。

答：99% 是路径错误、文件没加载、或者你删掉了某段初始化代码。

答：能，而且非常有效，但最好先读一眼控制台的报错内容，再贴给我，会准很多。
相关文章推荐
阅读 87