Day381:说一下 JavaScript 严格模式下有哪些不同？

Question

Day381:说一下 JavaScript 严格模式下有哪些不同？

Genzhen opened this issue 3 years ago · 0 comments

Genzhen commented 3 years ago

每日一题会在下午四点在交流群集中讨论，五点小程序中更新答案
欢迎大家在下方发表自己的优质见解

二维码加载失败可点击小程序二维码

扫描下方二维码，收藏关注，及时获取答案以及详细解析，同时可解锁800+道前端面试题。

严格模式中的变化

ECMAScript 5 的严格模式是采用具有限制性 JavaScript 变体的一种方式，从而使代码显示地脱离“马虎模式/稀松模式/懒散模式“（sloppy）模式。

严格模式同时改变了语法及运行时行为。变化通常分为这几类：将问题直接转化为错误（如语法错误或运行时错误）, 简化了如何为给定名称的特定变量计算，简化了 eval 以及 arguments, 将写"安全“JavaScript 的步骤变得更简单，以及改变了预测未来 ECMAScript 行为的方式。

1.1 将过失错误转成异常

严格模式下无法再意外创建全局变量。

"use strict";
// ReferenceError
mistypedVaraible = 17;

严格模式会使引起静默失败的赋值操作抛出异常

例如, NaN 是一个不可写的全局变量. 在正常模式下, 给 NaN 赋值不会产生任何作用; 开发者也不会受到任何错误反馈. 但在严格模式下, 给 NaN 赋值会抛出一个异常. 任何在正常模式下引起静默失败的赋值操作 (给不可写属性赋值, 给只读属性(getter-only)赋值, 给不可扩展对象(non-extensible object)的新属性赋值) 都会抛出异常:

"use strict";

// 给不可写属性赋值
var obj1 = {};
Object.defineProperty(obj1, "x", { value: 42, writable: false });
obj1.x = 9; // 抛出TypeError错误

// 给只读属性赋值
var obj2 = {
  get x() {
    return 17;
  },
};
obj2.x = 5; // 抛出TypeError错误

// 给不可扩展对象的新属性赋值
var fixed = {};
Object.preventExtensions(fixed);
fixed.newProp = "ohai"; // 抛出TypeError错误

在严格模式下, 试图删除不可删除的属性时会抛出异常

之前这种操作不会产生任何效果

"use strict";
delete Object.prototype; // 抛出TypeError错误

严格模式要求函数的参数名唯一

在正常模式下, 最后一个重名参数名会掩盖之前的重名参数. 之前的参数仍然可以通过 arguments[i] 来访问, 还不是完全无法访问. 然而, 这种隐藏毫无意义而且可能是意料之外的 (比如它可能本来是打错了), 所以在严格模式下重名参数被认为是语法错误:

function sum(a, a, c) {
  // !!! 语法错误
  "use strict";
  return a + a + c; // 代码运行到这里会出错
}

严格模式禁止八进制数字语法

ECMAScript 并不包含八进制语法, 但所有的浏览器都支持这种以零(0)开头的八进制语法: 0644 === 420 还有 \045" === "%"在 ECMAScript 6 中支持为一个数字加"0o"的前缀来表示八进制数.

var a = 0o10; // ES6: 八进制

ECMAScript 6 中的严格模式禁止设置 primitive 值的属性

不采用严格模式,设置属性将会简单忽略(no-op),采用严格模式,将抛出 TypeError 错误

(function () {
  "use strict";

  false.true = ""; //TypeError
  (14).sailing = "home"; //TypeError
  "with".you = "far away"; //TypeError
})();

1.2 简化变量的使用

严格模式简化了代码中变量名字映射到变量定义的方式. 很多编译器的优化是依赖存储变量 X 位置的能力：这对全面优化 JavaScript 代码至关重要. JavaScript 有些情况会使得代码中名字到变量定义的基本映射只在运行时才产生. 严格模式移除了大多数这种情况的发生, 所以编译器可以更好的优化严格模式的代码.

严格模式禁用 with

with 所引起的问题是块内的任何名称可以映射(map)到 with 传进来的对象的属性, 也可以映射到包围这个块的作用域内的变量(甚至是全局变量), 这一切都是在运行时决定的: 在代码运行之前是无法得知的. 严格模式下, 使用 with 会引起语法错误, 所以就不会存在 with 块内的变量在运行时才决定引用到哪里的情况了:

"use strict";
var x = 17;
with (obj) {
  // !!! 语法错误
  // 如果没有开启严格模式，with中的这个x会指向with上面的那个x，还是obj.x？
  // 如果不运行代码，我们无法知道，因此，这种代码让引擎无法进行优化，速度也就会变慢。
  x;
}

严格模式下 eval 不再为上层范围引入新变量

在正常模式下, 代码 eval("var x;") 会给上层函数(surrounding function)或者全局引入一个新的变量 x . 这意味着, 一般情况下, 在一个包含 eval 调用的函数内所有没有引用到参数或者局部变量的名称都必须在运行时才能被映射到特定的定义 (因为 eval 可能引入的新变量会覆盖它的外层变量). 在严格模式下 eval 仅仅为被运行的代码创建变量, 所以 eval 不会使得名称映射到外部变量或者其他局部变量:

var x = 17;
var evalX = eval("'use strict'; var x = 42; x");
console.assert(x === 17);
console.assert(evalX === 42);

相应的, 如果函数 eval 被在严格模式下的eval(...)以表达式的形式调用时, 其代码会被当做严格模式下的代码执行. 当然也可以在代码中显式开启严格模式, 但这样做并不是必须的.

function strict1(str) {
  "use strict";
  return eval(str); // str中的代码在严格模式下运行
}
function strict2(f, str) {
  "use strict";
  return f(str); // 没有直接调用eval(...): 当且仅当str中的代码开启了严格模式时
  // 才会在严格模式下运行
}
function nonstrict(str) {
  return eval(str); // 当且仅当str中的代码开启了"use strict"，str中的代码才会在严格模式下运行
}

strict1("'Strict mode code!'");
strict1("'use strict'; 'Strict mode code!'");
strict2(eval, "'Non-strict code.'");
strict2(eval, "'use strict'; 'Strict mode code!'");
nonstrict("'Non-strict code.'");
nonstrict("'use strict'; 'Strict mode code!'");

因此，在 eval 执行的严格模式代码下，变量的行为与严格模式下非 eval 执行的代码中的变量相同。

严格模式禁止删除声明变量

delete name 在严格模式下会引发语法错误

"use strict";

var x;
delete x; // !!! 语法错误

1.3 让 eval 和 arguments 变的简单

严格模式让 arguments 和 eval 少了一些奇怪的行为。两者在通常的代码中都包含了很多奇怪的行为： eval 会添加删除绑定，改变绑定好的值，还会通过用它索引过的属性给形参取别名的方式修改形参. 虽然在未来的 ECMAScript 版本解决这个问题之前，是不会有补丁来完全修复这个问题，但严格模式下将 eval 和 arguments 作为关键字对于此问题的解决是很有帮助的。

名称 eval 和 arguments 不能通过程序语法被绑定(be bound)或赋值

以下的所有尝试将引起语法错误:

"use strict";
eval = 17;
arguments++;
++eval;
var obj = { set p(arguments) { } };
var eval;
try { } catch (arguments) { }
function x(eval) { }
function arguments() { }
var y = function eval() { };
var f = new Function("arguments", "'use strict'; return 17;");

严格模式下，参数的值不会随 arguments 对象的值的改变而变化。

在正常模式下，对于第一个参数是 arg 的函数，对 arg 赋值时会同时赋值给 arguments[0]，反之亦然（除非没有参数，或者 arguments[0] 被删除）。严格模式下，函数的 arguments 对象会保存函数被调用时的原始参数。arguments[i] 的值不会随与之相应的参数的值的改变而变化，同名参数的值也不会随与之相应的 arguments[i] 的值的改变而变化。

function f(a) {
  "use strict";
  a = 42;
  return [a, arguments[0]];
}
var pair = f(17);
console.assert(pair[0] === 42);
console.assert(pair[1] === 17);

不再支持 arguments.callee。

正常模式下，arguments.callee 指向当前正在执行的函数。这个作用很小：直接给执行函数命名就可以了！此外，arguments.callee 十分不利于优化，例如内联函数，因为 arguments.callee 会依赖对非内联函数的引用。在严格模式下，arguments.callee 是一个不可删除属性，而且赋值和读取时都会抛出异常：

"use strict";
var f = function () {
  return arguments.callee;
};
f(); // 抛出类型错误

1.4 安全的 JavaScript

严格模式下更容易写出“安全”的 JavaScript。

在严格模式下通过 this 传递给一个函数的值不会被强制转换为一个对象。

对一个普通的函数来说，this 总会是一个对象：不管调用时 this 它本来就是一个对象；还是用布尔值，字符串或者数字调用函数时函数里面被封装成对象的 this；还是使用 undefined 或者 null 调用函数式 this 代表的全局对象（使用 call, apply 或者 bind 方法来指定一个确定的 this）。这种自动转化为对象的过程不仅是一种性能上的损耗，同时在浏览器中暴露出全局对象也会成为安全隐患，因为全局对象提供了访问那些所谓安全的 JavaScript 环境必须限制的功能的途径。所以对于一个开启严格模式的函数，指定的 this 不再被封装为对象，而且如果没有指定 this 的话它值是 undefined：。

在严格模式中再也不能通过广泛实现的 ECMAScript 扩展“游走于”JavaScript 的栈中。

在普通模式下用这些扩展的话，当一个叫 fun 的函数正在被调用的时候，fun.caller 是最后一个调用 fun 的函数，而且 fun.arguments 包含调用 fun 时用的形参。这两个扩展接口对于“安全”JavaScript 而言都是有问题的，因为他们允许“安全的”代码访问"专有"函数和他们的（通常是没有经过保护的）形参。如果 fun 在严格模式下，那么 fun.caller 和 fun.arguments 都是不可删除的属性而且在存值、取值时都会报错：

function restricted() {
  "use strict";
  restricted.caller; // 抛出类型错误
  restricted.arguments; // 抛出类型错误
}
function privilegedInvoker() {
  return restricted();
}
privilegedInvoker();

严格模式下的 arguments 不会再提供访问与调用这个函数相关的变量的途径。

在一些旧时的 ECMAScript 实现中 arguments.caller 曾经是一个对象，里面存储的属性指向那个函数的变量。这是一个安全隐患，因为它通过函数抽象打破了本来被隐藏起来的保留值；它同时也是引起大量优化工作的原因。出于这些原因，现在的浏览器没有实现它。但是因为它这种历史遗留的功能，arguments.caller 在严格模式下同样是一个不可被删除的属性，在赋值或者取值时会报错：

"use strict";
function fun(a, b) {
  "use strict";
  var v = 12;
  return arguments.caller; // 抛出类型错误
}
fun(1, 2); // 不会暴露v（或者a，或者b）

1.5 为未来的 ECMAScript 版本铺平道路

未来版本的 ECMAScript 很有可能会引入新语法，ECMAScript5 中的严格模式就提早设置了一些限制来减轻之后版本改变产生的影响。如果提早使用了严格模式中的保护机制，那么做出改变就会变得更容易。

在严格模式中一部分字符变成了保留的关键字。

这些字符包括 implements, interface, let, package, private, protected, public, static 和 yield。在严格模式下，你不能再用这些名字作为变量名或者形参名。

严格模式禁止了不在脚本或者函数层面上的函数声明。

在浏览器的普通代码中，在“所有地方”的函数声明都是合法的。这并不在 ES5 规范中（甚至是 ES3）！这是一种针对不同浏览器中不同语义的一种延伸。未来的 ECMAScript 版本很有希望制定一个新的，针对不在脚本或者函数层面进行函数声明的语法。在严格模式下禁止这样的函数声明对于将来 ECMAScript 版本的推出扫清了障碍。

"use strict";
if (true) {
  function f() {} // 语法错误
  f();
}
for (var i = 0; i < 5; i++) {
  function f2() {} // !!! 语法错误
  f2();
}

function baz() {
  // 合法
  function eit() {} // 同样合法
}

这种禁止放到严格模式中并不是很合适，因为这样的函数声明方式从 ES5 中延伸出来的。但这是 ECMAScript 委员会推荐的做法，浏览器就实现了这一点。

二维码加载失败可点击 小程序二维码