当前位置：首页 > news >正文

js严格模式和非严格模式

news 2025/7/2 15:03:18

好的，这是一个非常基础且重要的概念。我们来详细解析一下 JavaScript 中的严格模式（Strict Mode）和非严格模式（Sloppy Mode）。

可以把它想象成参加一场考试：

非严格模式：就像是开卷、不计时的随堂测验，规则很宽松，写得不那么标准也能得分，老师会尽量“猜测”你的意图。
严格模式：就像是正式的闭卷大考，有严格的规范，任何不符合规则的写法都会被立刻标记为错误，不留任何情面。

1. 什么是严格模式？

严格模式 (Strict Mode) 是在 ECMAScript 5 (ES5) 中引入的一种选择性加入（opt-in）的机制，它为 JavaScript 代码选择了一种更严格、更受限的语法和错误处理规则。

它的本质是让 JavaScript 引擎以一种更“严谨”的方式来解析和执行你的代码，从而提高代码的健壮性和安全性。

非严格模式 (Sloppy Mode) 则是 JavaScript 默认的、向后兼容的、更“宽容”的模式。

2. 为什么需要严格模式？

JavaScript 最初被设计为一门非常宽容的语言，为了让网页在各种意外情况下都能勉强运行（而不是直接崩溃）。但这种宽容性也导致了一些问题：

静默错误 (Silent Errors)：一些本该是错误的操作，在非严格模式下不会报错，只会静默失败，这使得调试变得异常困难。
不安全的行为: 某些语法可能存在安全隐患或导致意外的全局变量污染。
阻碍引擎优化: 一些“坏语法”让 JavaScript 引擎难以对代码进行性能优化。
为未来做准备: 禁止一些未来可能被用作新关键字的保留字。

严格模式的诞生就是为了解决这些历史遗留问题。

3. 如何开启严格模式？

开启严格模式非常简单，只需在代码的特定位置添加一个字符串字面量：

"use strict";

根据你放置的位置，它的作用域也不同：

全局严格模式: 将 "use strict"; 放在脚本文件的最顶部。

// my-script.js
"use strict";// 整个文件都将以严格模式运行
let x = 10;
// ...

函数内严格模式: 将 "use strict"; 放在函数体的最顶部。

function myStrictFunction() {"use strict";// 只有这个函数内部是以严格模式运行的let y = 20;// ...
}

一个非常重要的现代知识点：

在 ES6 模块 (import/export) 和 class 的代码块中，严格模式是默认开启的，你无需手动添加 "use strict";。这就是为什么在现代前端框架（如 React, Vue）的开发中，你很少看到这行代码，因为你写的代码基本上都已经是运行在严格模式下的模块了。

4. 严格模式与非严格模式的主要区别

下面是一些最直观和重要的区别，通过代码对比会非常清晰：

a. 禁止意外创建全局变量

这是最经典的区别。

非严格模式:

function createGlobal() {mistake = "I am a global variable!"; // 忘记写 let/const/var
}
createGlobal();
console.log(window.mistake); // "I am a global variable!" (在浏览器中)
// 变量泄漏到了全局作用域，这是一个非常危险的副作用。

严格模式:

"use strict";
function createGlobal() {mistake = "This will cause an error";
}
// createGlobal(); // 这一行会直接抛出 ReferenceError，程序会中断

结论：严格模式将一个常见的“静默错误”变成了“抛出错误”，让你能立刻发现问题。

b. 禁止对只读属性或不可扩展对象进行修改

非严格模式:

const obj = {};
Object.defineProperty(obj, 'readOnly', { value: 10, writable: false });obj.readOnly = 20; // 尝试修改只读属性
console.log(obj.readOnly); // 10 (修改静默失败，不会报错)

严格模式:

"use strict";
const obj = {};
Object.defineProperty(obj, 'readOnly', { value: 10, writable: false });// obj.readOnly = 20; // 这一行会抛出 TypeError

结论: 严格模式同样将静默失败的操作变成了明确的错误。

c. `this` 的指向不同

我们在之前的练习中已经遇到过。

非严格模式:

function showThis() {console.log(this);
}
showThis(); // 在浏览器中，会输出全局的 window 对象

严格模式:
```
"use strict";
function showThis() {console.log(this);
}
showThis(); // 输出 undefined
```
结论: 严格模式下的 this 行为更安全，避免了意外地污染全局对象。

d. 禁止重复的参数名

非严格模式:

function sum(a, a, b) { // 不会报错return a + a + b; // 实际上是第二个 a 生效
}
console.log(sum(1, 2, 3)); // 2 + 2 + 3 = 7

严格模式:

"use strict";
// function sum(a, a, b) { // 这一行在代码解析阶段就会抛出 SyntaxError
//   return a + b;
// }

结论: 严格模式在语法层面就杜绝了这种不合理的代码。

总结与建议

特性	非严格模式 (Sloppy Mode)	严格模式 (Strict Mode)
意外全局变量	允许，静默创建	禁止，抛出 `ReferenceError`
修改只读属性	静默失败	禁止，抛出 `TypeError`
全局函数`this`	指向全局对象 (`window`)	`undefined`
重复参数名	允许（最后一个生效）	禁止，抛出 `SyntaxError`