JavaScript 中 'use strict' 的作用及原理

JavaScript 中 ‘use strict’ 的作用及原理

技术背景

在 JavaScript 的早期版本中，语言的设计较为宽松，这虽然使得开发者编写代码更加便捷，但也容易导致一些难以调试的错误和不安全的行为。为了解决这些问题，ECMAScript 5 引入了严格模式（Strict Mode），通过使用 "use strict"; 指令来开启。严格模式对 JavaScript 的语法和行为进行了一些限制，使得代码更加安全、可靠，同时也便于静态分析工具进行检查。

实现步骤

全局开启严格模式

将 "use strict"; 放在脚本文件的顶部，整个脚本文件都将以严格模式执行。

1
2
3

"use strict";
// 后续代码都在严格模式下执行
var a = 1;

函数内部开启严格模式

将 "use strict"; 放在函数体的顶部，该函数及其内部嵌套的函数将以严格模式执行。

function myFunction() {
    "use strict";
    // 此函数内的代码在严格模式下执行
    var b = 2;
}

ES6 模块和类中的严格模式

在原生 ECMAScript 模块（使用 import 和 export 语句）和 ES6 类中，严格模式是默认开启的，无需显式添加 "use strict";。

// 模块中的严格模式
export function moduleFunction() {
    // 此函数在严格模式下执行
    let c = 3;
}

// 类中的严格模式
class MyClass {
    constructor() {
        // 此构造函数在严格模式下执行
        this.d = 4;
    }
}

核心代码

以下是一些在严格模式下会抛出错误，但在非严格模式下可能正常执行或静默失败的代码示例：

禁止隐式全局变量

// 非严格模式
function nonStrictFunction() {
    x = 10; // 隐式创建全局变量
    console.log(x);
}
nonStrictFunction();

// 严格模式
function strictFunction() {
    "use strict";
    y = 20; // 抛出 ReferenceError
}
strictFunction();

禁止重复参数名

// 非严格模式
function nonStrictSum(a, a) {
    return a + a;
}
console.log(nonStrictSum(1, 2)); // 正常执行

// 严格模式
function strictSum() {
    "use strict";
    // 抛出 SyntaxError
    function sum(a, a) {
        return a + a;
    }
    return sum(1, 2);
}
strictSum();

禁止删除不可删除的属性

// 非严格模式
delete Object.prototype; // 静默失败

// 严格模式
function strictDelete() {
    "use strict";
    delete Object.prototype; // 抛出 TypeError
}
strictDelete();