严格模式

Kpsmart2025年3月7日大约 8 分钟

严格模式

严格模式是JavaScript的一种受限制的变体，提供更强的错误检查和安全性。本文将详细介绍严格模式的启用方法、语法限制以及它如何改变JavaScript的默认行为，帮助您编写更健壮的代码。

严格模式概述

严格模式（Strict Mode）是ECMAScript 5引入的一个重要特性，它对JavaScript的语法和运行时行为施加了更严格的规则。启用严格模式后，一些原本默默被接受的"不良"语法将会抛出错误，帮助开发者在早期发现问题，编写更加安全、高效的代码。

严格模式的目的

消除JavaScript语言中一些不合理、不严谨之处
提高编译器效率，增加运行速度
为未来新版本的JavaScript做好铺垫
防止意外创建全局变量
使eval和arguments变得更安全
禁用在ECMAScript未来版本中可能定义的语法

启用严格模式

严格模式可以应用于整个脚本或单个函数。

为整个脚本启用严格模式

在脚本文件的顶部添加"use strict"声明：

"use strict";

// 下面的代码将在严格模式下执行
var strictModeExample = function() {
  // 这里也是严格模式
};

为函数启用严格模式

在函数体的开头添加"use strict"声明：

function strictFunction() {
  "use strict";
  // 这个函数内部是严格模式
  return this; // 在严格模式下，这里的this是undefined
}

function nonStrictFunction() {
  // 这个函数不是严格模式
  return this; // 在非严格模式下，这里的this指向全局对象（浏览器中是window）
}

在模块中的严格模式

ES6模块自动采用严格模式，不需要显式声明：

// 在ES6模块中，这里已经是严格模式
export function moduleFunction() {
  // 不需要"use strict"声明
  // 这里也是严格模式
}

注意事项

严格模式声明必须位于脚本或函数的开头，前面只能有注释
严格模式不能通过条件语句启用

// 无效的严格模式启用方式
if (true) {
  "use strict"; // 这不会启用严格模式
}

严格模式的主要限制和变化

1. 变量必须声明后再使用

"use strict";

// 错误：变量未声明
x = 10; // ReferenceError: x is not defined

// 正确做法
var y = 20; // 或使用let、const

2. 禁止使用with语句

"use strict";

// 错误：不允许使用with
with (Math) {
  // SyntaxError: Strict mode code may not include a with statement
  x = cos(PI); 
}

// 正确做法
var x = Math.cos(Math.PI);

3. eval不再为上层作用域引入变量

"use strict";

eval("var evalVar = 42;");
console.log(typeof evalVar); // "undefined"，而非严格模式下会是"number"

4. 禁止删除不可删除的属性

"use strict";

// 错误：不能删除不可配置的属性
delete Object.prototype; // TypeError

// 错误：不能删除变量
var x = 1;
delete x; // SyntaxError

5. 函数参数不能重名

"use strict";

// 错误：参数名重复
function duplicate(a, a) {
  // SyntaxError: Duplicate parameter name not allowed in this context
  return a + a;
}

6. 禁止八进制数字语法

"use strict";

// 错误：禁止八进制数字语法
var octal = 010; // SyntaxError

// 正确做法（ES6+）
var octal = 0o10; // 8

7. 禁止设置原始值的属性

"use strict";

// 错误：不能为原始值设置属性
false.true = ""; // TypeError
(14).sailing = "home"; // TypeError
"with".you = "far away"; // TypeError

8. this的值不会被强制转换为对象

"use strict";

function showThis() {
  console.log(this);
}

showThis(); // undefined，非严格模式下是全局对象

showThis.call(2); // 2，非严格模式下是Number对象
showThis.call(null); // null，非严格模式下是全局对象
showThis.call(undefined); // undefined，非严格模式下是全局对象

9. 函数声明必须在顶层

"use strict";

if (true) {
  // 在严格模式下，这在某些实现中会报错
  function f() { }
}

// 正确做法
let f;
if (true) {
  f = function() { };
}

10. 禁止使用arguments.callee和arguments.caller

"use strict";

function restricted() {
  // 错误：严格模式下不能使用arguments.callee
  console.log(arguments.callee); // TypeError
}

11. 禁止使用未来保留字作为变量名

"use strict";

// 错误：使用了保留字
var implements = 1; // SyntaxError
var interface = 2; // SyntaxError
var package = 3; // SyntaxError
var private = 4; // SyntaxError
var protected = 5; // SyntaxError
var public = 6; // SyntaxError
var static = 7; // SyntaxError
var yield = 8; // SyntaxError
var let = 9; // SyntaxError

严格模式对this的影响

严格模式下，函数内部的this值不再自动指向全局对象，而是保持为undefined：

"use strict";

function globalThis() {
  console.log(this);
}

globalThis(); // undefined，非严格模式下是全局对象

// 在对象方法中，this仍然指向调用该方法的对象
const obj = {
  method: function() {
    console.log(this);
  }
};

obj.method(); // 输出obj对象

这种变化使得意外使用全局对象的错误更容易被发现。

严格模式与构造函数

严格模式下，如果构造函数没有使用new关键字调用，this不会指向全局对象：

"use strict";

function Person(name) {
  this.name = name;
}

// 错误：没有使用new，this是undefined
Person("张三"); // TypeError: Cannot set property 'name' of undefined

// 正确做法
const person = new Person("张三");

这有助于防止意外调用构造函数而污染全局命名空间。

严格模式与事件处理

在DOM事件处理中，严格模式下的this仍然指向触发事件的元素：

"use strict";

document.getElementById("myButton").addEventListener("click", function() {
  console.log(this); // 仍然是按钮元素
});

严格模式的实际应用案例

案例1：防止意外创建全局变量

// 非严格模式
function nonStrictFunc() {
  accidentalGlobal = "I am global now";
}

nonStrictFunc();
console.log(accidentalGlobal); // "I am global now"

// 严格模式
function strictFunc() {
  "use strict";
  accidentalGlobal = "I am global now"; // ReferenceError
}

案例2：防止this指向全局对象

// 非严格模式
function nonStrictThis() {
  console.log(this); // 全局对象
}

// 严格模式
function strictThis() {
  "use strict";
  console.log(this); // undefined
}

案例3：捕获常见编码错误

"use strict";

// 拼写错误会被捕获
let person = {};
person.name = "张三";
console.log(preson.name); // ReferenceError: preson is not defined

// 重复的对象属性会被报告（在旧版浏览器中）
let obj = {
  prop: 1,
  prop: 2 // 在某些旧版浏览器的严格模式下会报错
};

严格模式的优缺点

优点

更早地发现错误：将一些常见的编程错误转变为异常
防止意外创建全局变量：避免污染全局命名空间
消除this强制转换：使this的行为更加可预测
提高安全性：禁用了一些不安全的特性
提高性能：某些情况下，严格模式的代码可以更好地被引擎优化

缺点

兼容性问题：在旧浏览器中可能不被完全支持
学习成本：需要了解严格模式的各种规则和限制
与第三方库的集成：如果第三方库不兼容严格模式，可能会出现问题

最佳实践

始终使用严格模式：在所有新项目中启用严格模式
使用模块系统：ES6模块自动采用严格模式
使用构建工具：如Babel、Webpack等可以帮助处理严格模式的兼容性问题
全局启用：在整个项目中一致地使用严格模式，避免混合使用
编写兼容代码：编写同时兼容严格模式和非严格模式的代码

(function() {
  "use strict";
  
  // 你的代码...
  
  function example() {
    // 这里也是严格模式
  }
})();

严格模式与现代JavaScript

随着JavaScript的发展，严格模式的许多规则已经成为语言的标准部分：

ES6模块：自动采用严格模式
类（Class）：类内部代码自动采用严格模式
现代框架：大多数现代框架如React、Vue等默认使用严格模式
TypeScript：提供比严格模式更严格的类型检查

因此，在现代JavaScript开发中，严格模式已经成为事实上的标准。

总结

严格模式是JavaScript的一个重要特性，它通过施加更严格的语法和运行时规则，帮助开发者编写更加安全、高效的代码。主要变化包括：

变量必须先声明后使用
禁止使用with语句
eval不再为上层作用域引入变量
函数中的this不再自动指向全局对象
禁止删除不可删除的属性
函数参数不能重名
禁止八进制数字语法
禁止设置原始值的属性

在现代JavaScript开发中，严格模式已经成为标准实践，特别是随着ES6模块和类的广泛使用，严格模式的规则已经自然地融入到日常开发中。