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

技术背景

在JavaScript的发展历程中，早期版本存在一些设计上的缺陷和容易导致错误的特性。例如，变量未声明就可以使用，这可能会导致意外的全局变量创建；一些操作失败时会静默处理，不抛出错误，使得调试变得困难。为了解决这些问题，ECMAScript 5引入了严格模式（Strict Mode），通过 "use strict" 指令来开启。

实现步骤

全局开启严格模式

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

// File: myscript.js
'use strict';
var a = 2;
// 后续代码都在严格模式下执行

函数内开启严格模式

在函数内部的顶部添加 "use strict"，该函数及其内部嵌套函数的代码将以严格模式执行。

function doSomething() {
    'use strict';
    // 此函数内的代码在严格模式下执行
}

ES6模块和类中的严格模式

在原生ECMAScript模块（使用 import 和 export 语句）和ES6类中，严格模式总是开启的，并且不能禁用。

核心代码

禁止全局变量声明

'use strict';
var tree1Data = { name: 'Banana Tree', age: 100, leafCount: 100000 };

function Tree(typeOfTree) {
    var age;
    var leafCount;

    age = typeOfTree.age;
    leafCount = typeOfTree.leafCount;
    // 下面这行代码会在严格模式下抛出错误
    nameoftree = typeOfTree.name; 
}

var tree1 = new Tree(tree1Data);

消除 with 语句

'use strict';
var tree1Data = {
    name: 'Banana Tree',
    age: 100,
    leafCount: 100000
};

function Tree(typeOfTree) {
    var age;
    var leafCount;

    age = typeOfTree.age;
    leafCount = typeOfTree.leafCount;

    for (var i = 0; i < 2; ++i) {
        // 下面这行代码会在严格模式下抛出错误
        with(leafCount = i) { /*do something*/ } 
    }
}

var tree1 = new Tree(tree1Data);

防止属性重复

'use strict';
// 下面这行代码会在严格模式下抛出错误
var tree1Data = {
    name: 'Banana Tree',
    age: 100,
    leafCount: 100000,
    name: 'Banana Tree'
};

最佳实践

新项目使用

在新项目中，建议从一开始就全面使用严格模式。可以配置JSHint/JSLint等工具，开启所有警告和选项，结合Grunt+Karma+Chai等构建/测试/断言系统，确保代码质量。

旧项目引入

对于旧项目，如果要引入严格模式，需要谨慎操作。先对代码进行全面的单元测试，使用严格配置的JSHint构建任务，逐步发现并修复严格模式下的错误。避免在不拥有或维护的第三方模块中添加 "use strict"。

常见问题

浏览器兼容性问题

早期不支持ECMAScript 5的浏览器会忽略 "use strict" 指令，但代码中违反严格模式的部分可能会导致难以调试的问题。不过，目前主流浏览器都已经支持严格模式。

代码修改成本高

在旧项目中引入严格模式可能会导致大量代码报错，需要花费时间和精力进行修改和调试。因此，在引入前需要评估项目的规模和复杂度。

保留字问题

ECMAScript 5添加了一些保留字（如 implements, interface, let 等），在严格模式下使用这些保留字作为变量或参数名会抛出错误。需要注意避免使用这些保留字。