深度解析：吃透 JavaScript 中 var、this 和严格模式的 7 个隐藏陷阱

作为前端开发者，我们每天都在与 JavaScript 打交道，但你真的理解 var 声明、this 指向和严格模式的底层机制吗？本文从实战角度出发，结合典型案例，深度剖析这三个核心概念的设计初衷与潜藏陷阱，帮你彻底掌握它们的精髓。

一、var 声明的“神奇”特性：为什么会挂载到 window 上？

var a = 1;
console.log(window.a); // 1

function f() { console.log('haha'); }
console.log(window.f); // [Function: f]

• 在浏览器中，全局 var 和函数声明会被挂载到全局对象 window 上，这源自 JavaScript 最初的设计理念——全局变量与顶层对象属性等价 ([rahul319sinha.medium.com][1])。
• 问题在于，这种设计会导致全局命名空间污染，增加命名冲突与维护难度 。
• ES6 引入的 let 和 const 采用块级作用域，不会挂载到 window 上，也因此更安全可控 。

二、严格模式下函数名只读：你真的能改吗？

"use strict";

(function b(){
  b = 20;    // 不生效
  console.log(b); // 输出函数自身
})();

• 在严格模式下，函数名相当于一个只读绑定，不能被重新赋值 ([stackoverflow.com][2])。
• 这样的设计是为了避免开发者在函数内部意外地覆盖函数自身，有助于提升引擎优化和代码健壮性。

三、this 指向：动态决定，精髓在调用方式

1. 普通函数调用

var name = '王子';
function func() {
  console.log(this);       // window（非严格模式）
  console.log(this.name);  // '王子'
}
func();

普通函数调用时，this 指向全局对象（浏览器为 window）([en.wikipedia.org][3])。

2. 严格模式下的差异

"use strict";
var name = "windowsName";
var a = {
  name: "公主",
  fn: function() {
    console.log(this);       // a
    console.log(this.name);  // "公主"
  }
};
a.fn();      // 方法调用
var b = a.fn;
b();         // 严格模式下 this 是 undefined

相同函数，不同调用方式导致 this 大变样—方法调用、普通调用表现完全不同 。

3. 构造函数调用

function Person(name, age){
  this.name = name;
  this.age = age;
}
const p = new Person('labubu', 2);
console.log(p.name); // 'labubu'

使用 new 时，this 指向新创建的实例。

4. 事件处理函数中 this

document.getElementById('btn').addEventListener('keydown', function() {
  console.log(this);      // 触发事件的 DOM 元素
  console.log(this.value);
});

事件回调中，this 指向触发事件的元素。

5. 箭头函数：this 从不属于它自己

var a = {
  name: 'tom',
  func1: function() { console.log(this.name); },
  func2: function() {
    setTimeout(function(){
      this.func1(); // this 指向 window，会报错
    }, 1000);
  }
};

传统回调中 this 异常。使用箭头函数即可继承外层的 this，避免混淆。

四、运行环境差异：浏览器 vs Node.js

• 在浏览器中，全局对象是 window，var a = 1 会挂载到 window.a。
• 在 Node.js 中，全局对象为 global，同样 var a = 1 会挂载到 global.a。

两种环境变量行为一致，差异仅在全局对象名称不同 ([en.wikipedia.org][3], [sitepoint.com][4])。

五、严格模式下的 7 个隐藏陷阱

1. 隐式全局变量失效
   未声明直接赋值会抛 ReferenceError 。

2. 对只读属性赋值报错
   严格模式下对不可写属性会立即抛 TypeError 。

3. 删除变量/不可配置属性失效
   例如 delete Object.prototype 会报错 ([developer.mozilla.org][5])。

4. 函数参数不能重名
   function(a, a){} 会触发语法错误 。

5. 禁止八进制语法
   010 会直接 SyntaxError，要使用 0o10 ([geekster.in][6])。

6. 禁止 with 语句
   直接成为语法错误 ([w3schools.com][7])。

7. this 未定义不自动修正
   非严格模式时 this 为 global，严格模式中 undefined ([w3schools.com][7])。

六、实战建议：提升代码可维护性与安全性

• 尽量避免全局 var，改用 let、const 和模块化写法来限制作用域。
• 始终开启严格模式（建议在模块化环境中统一启用），它可自动优化代码行为、避免低级错误。
• 深入理解 this 指向规则，尤其是回调、事件、构造函数、箭头函数等场景，才能写出可预测的逻辑。
• 编写同构代码时，注意环境差异，window vs global、globalThis，应统一使用跨平台兼容写法。

总结

掌握这些核心机制和设计理念，能让你写出健壮、优雅且易维护的 JavaScript 代码，也为面试或高阶开发打下扎实基础。💪