一、理解严格模式
1.1、JavaScript 是一门弱类型语言,为了防止导致不可预测的错误,增加代码规范,为了使编写的代码变得更合理、更安全、更严谨,ECAMscript5 提出了"严格模式",处于严格模式下运行的 JavaScript 代码会遵循更加苛刻的条件。
1.2、关键字:
"use strict";
1.3、关键字说明:
1、注意区分大小写,必须全部都是小写的 2、注意空格,整个字符串总共10个字符 3、单引号和双引号无所谓,但是需要有引号 4、必须写在作用域的最顶部,注意其具体的位置 5、可以加分号,也可以不加,但是必须是一个字符串 // 正确示例 “use strict”; // 错误示例 "USE strict"; " use strict "; "("USE strict").toLowerCase();"
1.4、兼容性
IE10+的浏览器 及其他主流浏览器均支持严格模式。
1.5、开发中使用吗?
问:平时开发使用严格模式吗?
答:平时使用vue工程化项目,其实已经在使用严格模式了。
二、如何开启严格模式
2.1、整个文件开启严格模式
我们平常写代码的时候可能没太注意严格模式和非严格模式,默认情况下,我们编写的 js 代码都是非严格模式的,想要开启严格模式,我们需要在规定的地方添加'use strict'关键词。
<script> "use strict"; console.log("严格模式"); </script> <script> console.log("非严格模式") </script>
2.2、单个函数开启严格模式
除了给整个脚本文件添加严格模式外,我们还可以只针对某个函数开启严格模式,我们只需要将"use strict"关键词放在函数体的第一行即可。
function strict() { "use strict"; return "严格模式"; } function notStrict() { return "正常模式"; }
三、严格模式的特点
在变量中、在对象中、在函数中。
3.1、变量
3.1.1、严格模式下变量使用前必须要声明
非严格模式
<script> snow = 'snowball' console.log(snow) </script>
浏览器正常打印没有报错
严格模式
<script> "use strict" snow = "snowball" console.log('snow') </script>
浏览器报错,提示:snow is not defined
3.1.2、严格模式下不能使用delete删除变量
非严格模式
<script> // 变量 snow = "snowball" delete window.snow console.log(snow) </script>
snow is not defined 说明已经删除
严格模式
<script> // 变量 "use strict" snow = "snowball" delete snow console.log(snow) </script>
3.1.3、无法使用关键词作为变量名
非严格模式
<script> // 变量 //"use strict" let implements= "snowball" console.log(implements) </script>
严格模式
<script> // 变量 "use strict" let implements= "snowball" console.log(implements) </script>
3.2、对象
属性描述符,出现不当操作的时候(静默失败,出现报错)
3.2.1、对象属性操作会更加严格
非严格模式
<script> //"use strict"; let obj = {} Object.defineProperty(obj, "name", { value: 'snow', writable: false }); obj.name = "snowball" console.log(obj); </script>
严格模式
<script> "use strict"; let obj = {} Object.defineProperty(obj, "name", { value: 'snow', writable: false }); obj.name = "snowball" console.log(obj); </script>
非严格模式
<script> let obj = {} Object.preventExtensions(obj); // 禁止添加属性 obj.name = "snow" console.log(obj); </script>
严格模式
<script> "use strict"; let obj = {} Object.preventExtensions(obj); // 禁止添加属性 obj.name = "snow" console.log(obj); </script>
3.3、函数
3.3.1、函数参数不能有重名函数
正常情况
//"use strict"; function setName(name, name2) { console.log(name, name2) } setName('snow');
非严格模式,参数相同
<script> //"use strict"; function setName(name, name) { console.log(name, name) } setName('snow'); </script>
严格模式
<script> "use strict"; function setName(name, name) { console.log(name, name) } setName('snow'); </script>
3.3.2、函数arguments有限制
3.3.2.1、无法修改arguments
非严格模式
<script> //"use strict"; function setName(name){ arguments = 'snowball' console.log(arguments) } setName('snow'); </script>
严格模式
<script> "use strict"; function setName(name){ arguments = 'snowball' console.log(arguments) } setName('snow'); </script>
3.3.2.2、不再追踪参数变化
非严格模式
<script> //"use strict"; function setName(name){ arguments = 'snowball' console.log(name); console.log(arguments) } setName('snow'); </script>
严格模式
<script> "use strict"; function setName(name){ arguments = 'snowball' console.log(name); console.log(arguments) } setName('snow'); </script>
3.3.2.3、禁止使用arguments.callee
非严格模式
<script> //"use strict"; function setName(name){ arguments.callee(); } setName('snow'); // 正常调用,只不过要考虑内存溢出问题 </script>
严格模式
<script> "use strict"; function setName(name){ arguments.callee(); } setName('snow'); </script>