JavaScript 初学者常犯的 5 个致命错误（以及如何避免）

为什么 JavaScript 让人头疼，但不应毁掉你的职业生涯

JavaScript 既是最友好的编程语言，也是最阴险的。一方面，你写下 console.log('Hello')，浏览器中立刻就会出现结果。另一方面，同样的代码可能会突然输出 undefined、NaN 甚至更糟，而你会花一个小时去寻找隐藏在一行代码中的错误。

在 pythonlib.ru，我们深知从别人的错误中学习有多重要。本文将分析 JavaScript 初学者常犯的 5 个典型错误，这些错误会让你的代码变成一团糟。更重要的是，我们会展示如何修复它们。开始吧！

错误 #1：神奇的「var」以及对作用域的误解

许多刚开始学习 JavaScript 的开发者会使用 var 来声明变量。这是旧标准 ES5 的遗留产物，至今仍出现在十年前的教科书中。但 var 就像一辆没有安全气囊的老车：能开，但一旦发生事故（也就是 bug），你会受到重创。

问题出在哪里？

var 具有函数作用域，而不是块级作用域。这意味着在 if 或 for 内部声明的变量，在它们的外部仍然可以访问。

// 示例：var 的错误\nfunction testVar() {\n  if (true) {\n    var x = 10;\n  }\n  console.log(x); // 10 — 可以工作，尽管 x 是在 if 内部声明的\n}\n\ntestVar();

现在想象一下，你的项目中有 1000 行代码。你在循环中声明了 var i，后来又不小心使用了同一个变量——你就会得到一个难以追踪的 bug。

正确做法是什么？

使用 let 和 const。它们具有块级作用域，行为可预测。

// 正确做法：let 和 const\nfunction testLet() {\n  if (true) {\n    let y = 20;\n    const z = 30;\n  }\n  console.log(y); // ReferenceError: y is not defined\n}\n\ntestLet();

建议：默认始终使用 const。只有当变量需要重新赋值时，才使用 let。把 var 留在过去吧，就像软盘一样。

错误 #2：被遗忘的关键字「this」——丢失的上下文

JavaScript 中的关键字 this 就像巧克力蛋里的惊喜：你永远不知道会得到什么。初学者常常认为 this 总是指向当前对象。但事实并非如此。this 取决于函数的调用方式，而不是它的声明位置。

经典示例：回调中丢失上下文

const user = {\n  name: '安娜',\n  greet: function() {\n    console.log('你好，' + this.name);\n  }\n};\n\nuser.greet(); // 你好，安娜 — 正常工作\n\nsetTimeout(user.greet, 1000); // 你好，undefined — 上下文丢失了！

为什么会这样？因为 setTimeout 将函数作为普通函数调用，而不是作为对象的方法。此时 this 指向全局对象（在浏览器中是 window），而它没有 name 属性。

如何修复？

三种方法：

\n
• 箭头函数——它不会创建自己的 this，而是从外部上下文获取。
\n
• .bind() 方法——永久绑定上下文。
\n
• 保存 this 的引用（旧方法，最好别用）。
\n

// 修复：箭头函数\nconst user = {\n  name: '安娜',\n  greet: function() {\n    console.log('你好，' + this.name);\n  }\n};\n\nsetTimeout(() => user.greet(), 1000); // 你好，安娜\n\n// 或者使用 bind\nsetTimeout(user.greet.bind(user), 1000); // 你好，安娜

错误 #3：异步——「