Web前端入门第 55 问:JavaScript 严格模式与非严格模式区别

JavaScript 默认是非严格模式的,可以通过 "use strict"; 启用严格模式。此声明语句可以放在 JS 文件顶部,也可以放在函数内部。

启用严格模式

1、外部脚本在 JS 文件开头声明,内部脚本在 <script> 标签开头声明,声明后所有 JS 代码启用严格模式:

"use strict";

console.log('Hello World!');

错误写法:

console.log("test");
"use strict"; // 置于代码之后的声明,严格模式不生效!

2、在函数内部声明函数启用严格模式,此时本函数体内部的 JS 代码将启用严格模式:

function strictFunc() {
  "use strict"; // 函数级严格模式
  let x = 10;
  y = 20; // ReferenceError: y is not defined
}

function nonStrictFunc() {
  y = 20; // 非严格模式下隐式创建全局变量(不推荐)
}

错误写法:

if (true) {
  "use strict"; // 无效!严格模式无法在块级作用域启用
  x = 10; // 非严格模式下隐式创建全局变量
}

3、模块化脚本(ES6 Modules)无需显式声明,默认启用严格模式:

// module.js(无需写 "use strict")
export default function() {
  x = 10; // ReferenceError: x is not defined
}

4、类(ES6 Class)声明或类方法内部无需显式声明默认启用严格模式:

class MyClass {
  constructor() {
    x = 10; // ReferenceError: x is not defined
  }
}

为何 JS 代码会有两种不同的解析结果?

这就不得不提到历史原因了,JS 之父创造 JavaScript 时,仅用了 10 天时间,这久导致了 JS 在后来使用中发现了一些问题,又由于浏览器的版本迭代必须要兼顾一些旧的代码(不可能浏览器来一个版本更新,直接把所有网站一棒打死),所以就有了 严格模式 的出现,这个模式的用途就是告诉浏览器,我这个网站的代码你按照 严格模式 来解析,无需考虑历史兼容性,可能存在的隐式错误可以先告诉我。

严格模式 vs 非严格模式

主要区别如下:

变量声明

非严格模式:未声明的变量赋值会隐式创建全局变量。

严格模式:未声明的变量赋值会抛出 ReferenceError。

<script>
  function test1 () {
    y = 10; // 声明为全局变量
  }
  test1();
  console.log(y); // 10
</script>
<script>
  function test2 () {
    "use strict";
    x = 10; // ReferenceError: x is not defined
  }
  test2();
  console.log(x); // test2 报错,此行代码不执行
</script>

静默错误转显式错误

删除不可删除的属性:delete Object.prototype; 在严格模式下报错。

重复参数名:function(a, a) {} 在严格模式下报语法错误。

只读属性赋值:NaN = 1; 在严格模式下报错。

<script>
  function test1 (a, a) {
    delete Object.prototype;
    NaN = 1;
  }
  test1();
</script>
<script>
  "use strict";
  function test2 (a, a1) { // 报错 SyntaxError
    delete Object.prototype; // 报错 TypeError
    NaN = 1; // 报错 TypeError
  }
  test2();
</script>

this 指向

非严格模式:全局函数中 this 指向全局对象(如 window)。

严格模式:全局函数中 this 为 undefined。

<script>
  function test1 () {
    console.log(this); // 浏览器中指向 Window 对象,nodejs 中指向 global 对象
  }
  test1();
</script>
<script>
  "use strict";
  function test2 () {
    console.log(this); // undefined
  }
  test2();
</script>

eval 和 arguments 限制

eval 变量泄漏:严格模式下 eval 中的变量不会污染外部作用域。

禁用 arguments.callee:防止递归调用导致性能问题。

<script>
  function test1 () {
    eval('var a = 10');
    console.log(arguments.callee); // 指向函数本身
    console.log(a); // 10
  }
  test1();
</script>
<script>
  "use strict";
  function test2 () {
    eval('var a = 10');
    console.log(arguments.callee); // 报错 TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
    console.log(a); // ReferenceError: a is not defined
  }
  test2();
</script>

其他限制

八进制表示:禁止 0123,需用 0o123。

with 语句:严格模式下禁用,避免作用域混乱。

保留字限制:如 interface、private 等不能作为变量名。

<script>
  function test1 () {
    console.log(0123); // 83
    with (Math) {
      console.log(random()); // 输出随机数
    }
    var interface = 'str';
    console.log(interface); // str
  }
  test1();
</script>
<script>
  "use strict";
  function test2 () {
    console.log(0123); // SyntaxError: Octal literals are not allowed in strict mode.
    with (Math) { // SyntaxError: Strict mode code may not include a with statement
      console.log(random());
    }
    var interface = 'str'; // SyntaxError: Unexpected strict mode reserved word
    console.log(interface);
  }
  test2();
</script>

写在最后

建议始终启用严格模式,强制更安全的编码实践,避免隐式错误,提升代码质量。

From:https://www.cnblogs.com/linx/p/18886166
前端路引
100+评论
captcha