javascript严格模式
1.什么是严格模式？
js运行有两种模式：一种是普通模式；一种是严格模式。
严格模式是ES5添加的，是比普通模式多一部分的js规则。如果在ES5之前js解析引擎，会忽略严格模式。
js一般默认是普通模式，ES6的模块和Class类默认是严格模式。
2. 严格模式的使用场景
严格模式的触发是使用： "use strict"
有两种使用场合：一种是脚本范围；一种是函数范围
1.脚本范围
1.在html文件中，可以在<script> 标签内的顶部直接使用"use strict";
"use strict"上面不能有可执行代码，否则失效；但是上面可以是注释内容或者空行。
❗️一个脚本内抛出异常，后面的代码不再执行；但是其他的脚本可以。如下：
<script> console.log(1); "use strict"; //上面有代码，自动失效 a=6; </script> <script> /* 这是个脚本注释，并且上面空了一行*/ "use strict"; // 严格模式；下面是声明时报错 b=6; // Uncaught ReferenceError: b is not defined </script> <script> "use strict"; // 严格模式 c=6; // Uncaught ReferenceError: c is not defined </script>
2.在一个脚本文件中，在顶部声明"use strict";顶部有注释或者空行（空；行不可以）也可以。
//--- es5.js
// 顶部的注释;并且有一个空行，整个文件都是严格模式 "use strict"; function test(a,a) { // Uncaught SyntaxError: Duplicate parameter name not allowed in this context // 严格模式不允许参数重复；声明时报错 }
上面的写法有隐患，如果项目内部需要脚本合并，如严格模式A.js和普通模式B.js，如果A在前，那么
B也会被解释成严格模式；如果B在前，那么A的严格模式会失效。
所以，如果是单独的文件，可以使用立即执行函数包裹以下，这样可以避免脚本合并的BUG。
// 这个是A.js的代码;代码效果和上面的相同，但是可以保证代码的独立 (function() { "use strict"; // 函数内部严格模式 function test(a,a) { // Uncaught SyntaxError: Duplicate parameter name not allowed in this context } })();
2.函数范围
在一个函数内顶部使用"use strict";那么在一个函数内是严格模式。
function test() { // 函数的注释 "use strict"; t = 7; } // 声明时不报错；执行时报错 test(); // Uncaught ReferenceError: t is not defined
3. 浏览器控制台范围
开发者最方便的调试工具是console控制台；默认是普通模式，可以手动设置严格模式；
3. 严格模式的内容
1. 显式报错
将普通模式中默默失败的错误，改为显式报错。
- 1. 只读属性赋值报错;删除不可配置属性报错
原先只读属性赋值或者删除不可配置属性，默默失败，不会抛出异常；严格模式下，会抛出异常。
"use strict"; class A { } class B{} // 类的prototype属性的writable,configurable,enumerable都是false A.prototype = new B(); // Uncaught TypeError: Cannot assign to read only property 'prototype' of function 'class A {}' delete A.prototype; // Uncaught TypeError: Cannot delete property 'prototype' of class A {}'
- 2.只设置了取值器的对象不可写
"use strict"; var a = { get prop() { return 1; } } a.prop = 5; //Uncaught TypeError: Cannot set property prop of #<Object> which has only a getter
- 3.禁止扩展的对象不可扩展（不能添加新属性）
"use strict"; var a = {}; Object.preventExtensions(a); a.x = 0; //Uncaught TypeError: Cannot add property x, object is not extensible
- 4.eval,arguments不可用作标识名
javascript中的保留字在严格模式下都会报错；实际开发中注意变量名不要是保留关键字。
非严格模式下，不会报错。
"use strict"; var eval = 5; //Uncaught SyntaxError: Unexpected eval or arguments in strict mode function test(arguments) { //Uncaught SyntaxError: Unexpected eval or arguments in strict mode }
- 5.函数参数名不能重复
- 6. 禁止使用0前缀表示八进制数。
ES6中也有规定，八进制数应该使用“0o”表示。
"use strict"; var a = 0o10; console.log(a); // 8 var b = 010; // Uncaught SyntaxError: Octal literals are not allowed in strict mode.
2. 加强安全
从语法书写上避免错误的产生。
- 1. 严格模式下，不允许this指向window
js引擎将其指向undefined。这个很好的解释了React类组件中方法必须绑定this，
否则默认this是undefined。
这时fn.call()/fn.call(null)/fn.call(undefined)不再默认绑定window。绑定的就是括号中的内容。
- 2. 不允许未声明的变量出现
即变量必须使用var, let等声明，否则报错。原来未声明的变量会默认成为全局变量。
"use strict"; a = 5; // Uncaught ReferenceError
- 3.禁止使用fn.caller/fn.arguments
首先fn.caller不是标准语法；生产环境禁止使用；fn.arguments已被废弃
但是某些情况下也会使用。
fn.caller是返回fn的调用栈，即触发该函数的函数；
如果在全局环境下调用，fn.caller()是null。
// 这是非严格模式；只是为了解释caller的概念；严格模式下报错 function test() { a(); console.log(test.caller);//null } function a() { console.log(a.caller); // function test(){a();} } test();
fn.arguments其实就是参数对象。可以在函数中直接使用arguments对象。
- 4.禁止使用arguments.callee/arguments.caller
这两个属性已经废弃。普通模式下使用，代码无效，不报错；严格模式下报错。
原来arguments.callee表示当前函数；arguments.caller和fn.caller一样。
- 5.不可删除声明的普通变量
普通模式下可以删除，并且可以删除成功。
"use strict"; let a = 6; delete a; //Uncaught SyntaxError: Delete of an unqualified identifier in strict mode.
- 6.严格模式下原始类型的值不能赋属性
普通模式下不报错，会自动将原值值转为包装对象。
"use strict"; (1).prop = 9; // Uncaught TypeError: Cannot create property 'prop' on number '1'
3. 禁止出现动态作用域
普通模式下，eval()和with()会在执行时动态生成作用域。
- 1. 禁止使用with语句
在严格模式下，使用with语句会报错。其实普通模式下，也不要使用with语句。
"use strict"; var obj ={}; with(obj) { //Uncaught SyntaxError: Strict mode code may not include a with statement a = 5; }
- 2.创建eval作用域
严格模式下，eval()会创建一个eval函数内部的作用域。
普通模式下, eval内部代码所在的作用域是函数所在的作用域。
// 普通模式下 function test() { var x = 5; eval("var x = 6"); //相当于直接var x= 6; console.log(x); // 6 } test(); // 严格模式下 "use strict"; // 1.第一种声明位置 function test() { // "use strict"; // 2.也可以在这里声明 var x = 5; eval("var x = 6"); // 只在eval内部有效 // 3. 还可以如下声明 // eval('"use strict"; var x= 6'); console.log(x); // 5 } test();
- 3.arguments对象不再随参数改变而改变
// 普通模式 function test(a) { a = 2; return [a, arguments[0]]; } console.log(test(1)); // [2, 2] // 严格模式 "use strict"; function test(a) { a = 2; return [a, arguments[0]]; } console.log(test(1)); // [2, 1]
4.向未来版本过渡
