JavaScript：严格模式

「爱情、让人受尽委屈。」 2024-03-26 13:36 113阅读 0赞

**一、理解严格模式**

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'关键词。

2.2、单个函数开启严格模式

除了给整个脚本文件添加严格模式外，我们还可以只针对某个函数开启严格模式，我们只需要将"use strict"关键词放在函数体的第一行即可。

function strict() {
      "use strict";
      return "严格模式";
    }
    
    
    function notStrict() {
      return "正常模式";
    }

**三、严格模式的特点**

在变量中、在对象中、在函数中。

**3.1、变量**

3.1.1、严格模式下变量使用前必须要声明

非严格模式

浏览器正常打印没有报错

![8a015c499bb44fec945b38d5d0fce826.png][]

严格模式

浏览器报错，提示：snow is not defined

![d73a4650c66f4de195e77f3a1a157722.png][]

3.1.2、严格模式下不能使用delete删除变量

非严格模式

snow is not defined 说明已经删除

![de4496973e9349a4aba94bc6a87b8201.png][]

严格模式

![44da6a05cbfa46a88e187c6d18c34c4c.png][]

3.1.3、无法使用关键词作为变量名

非严格模式

![7507de8b44a940649325090d7c3d54a0.png][]

严格模式

![72fcbdb13b584371b9f014552bddc1c0.png][]

**3.2、对象**

属性描述符，出现不当操作的时候（静默失败，出现报错）

3.2.1、对象属性操作会更加严格

非严格模式

![67984178348d4ae2a080a13017d03a2a.png][]

严格模式

![7bb5d6a75ee74c76bb1180c218dbac2b.png][]

非严格模式

![70827ba27e8a4fdd937e7f3c701ccc8e.png][]

严格模式

![0bad8df67bd64a78b975159dbb981565.png][]

3.3、函数

3.3.1、函数参数不能有重名函数

正常情况

//"use strict";
    	 function setName(name, name2) {
        		console.log(name, name2)
      	}
      	setName('snow');

![a688a739b9ad454ebe409f79738dcd90.png][]

非严格模式，参数相同

![b6abe83f6a90443fa66530bf59d42688.png][]

严格模式

![f651df9331d24235b29c208ea21799d1.png][]

3.3.2、函数arguments有限制

3.3.2.1、无法修改arguments

非严格模式

![69a481f0ea1344fa97937943391c62c6.png][]

严格模式

![8985f6dac41048629259f17e6363b8f2.png][]

3.3.2.2、不再追踪参数变化

非严格模式

![d7a7b486a800489c93d88854959d6425.png][]

严格模式

![daeb05ec78ea442dbfe5f4b265d97a6c.png][]

3.3.2.3、禁止使用arguments.callee

非严格模式

![a18916b151f24273a6441e34ef87c064.png][]

严格模式

![45fe5dbef04d41d3a714812f8d7e1c1b.png][]

3.3.3、函数必须声明在顶层

其实这和 JavaScript 中的块级作用域是比较相符的，在严格模式下，我们不能把函数声明在 if 或者 for 语句中。

非严格模式

![c5580835791f4186974c62a2d4849aa2.png][]

严格模式

![02bbd16921ab4790aa6709eb54bc5f6f.png][]

3.4、禁止使用eval（）

eval 一直都是备受大家争议的，它可以直接执行一段代码，这会导致非常多的问题，所以在严格模式下直接禁用它了。

非严格模式

![172484e0e9ca49d8adb459206d97daa6.png][]

严格模式

![7719742530734b3e9fefe3ca2baf317f.png][]

3.5、禁止使用width语句

with 语句主要用来扩展作用域链，它也备受争议，因为它无法在编译时确定属性到底属于哪个对象，所以我们目前是不建议使用它，所以严格模式下也直接禁止使用它了。

非严格模式

![2232270e39794c158b3e468c29f60dfb.png][]

严格模式

![3ded6744a7614ab9a6aad04d0928aa5d.png][]

3.6、this无法指向全局

使用 bind、apply 等方法修改 this 指向，但是当我们没有显示执行 this 指向时，this 默认会指向全局，在严格模式下这是不允许的。

非严格模式

![e8891aec08724798be99bcdc58aebd40.png][]

严格模式

![c8f5e90960d04d17b8feb3eceb4f5544.png][]

3.7、禁止八进制写法

在正常模式下，如果某个整数的第一位是 0，那么表示该数是八进制数，会自动进行转换，但是在严格模式下无法进行有效转换。

非严格模式

![89ee53dae23848e1bf01841674fb15fc.png][]

严格模式

![de3f80dde255473d8996ab90dc7a9e4c.png][]

**四、再次理解严格模式**

严格模式给我们带来了规范，但是同时也给我们带来了一些不便，但是为了未来的发展，我们最好还是按照严格模式的要求来，这样可以最大程度的减少我们出错的机率，也能够让我们的程序能够走得更远。

**五、过程记录**

记录一：

1、创建项目strict/index.html

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>title</title>
      <head>
      <body>
          // 变量
    	  "use strict"
    	  snow = "snowball"
    	  console.log(snow)
      </body>
    </html>

2、http-server启动项目的服务

3、启动后访问页面

![84e580db721a46259124649c2d501534.png][]

4、访问成功

![d66e748872ab4f00b1a9e4a31659577f.png][]

记录二：

vue2项目，，没有开启严格模式也会报错，，

![990909d52046447fb628cf6c51674ead.png][]

![def946645d3b4f339d3ad3f7cca397a5.png][]

nuxt3+vue3+ts项目，，没有开启严格模式也会报错，，

![072a43e664db41788b1f11d871aa780a.png][]

![d9e1b54598b64d1d9e8cf04544601bda.png][]

// vue2项目
    let snow = 0100
    console.log(snow)

![0574c6e626ae43ecbeadfbf68ecd1588.png][]

// vue3 + ts项目
    let snow = 0100
    console.log(snow)

![c1d3a69225a44c1495e004e3f0f19605.png][]

这说明，vue工程化项目，默认已经开启了严格模式，其实是这样的开启了。  
如果不想开启，可以在项目中进行配置。

**五、欢迎交流指正、关注我、一起学习。**

参考链接：

[前端 - vue中mounted中 或者说vue这个框架默认是严格模式？ - SegmentFault 思否][- vue_mounted_ _vue_ - SegmentFault]

[【全网首发：完结】JS 中的严格模式【 经典前端面试题 】\_哔哩哔哩\_bilibili][JS _ _ _bilibili]

[8a015c499bb44fec945b38d5d0fce826.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/b585a71760b2403d9f756b0e1f5675d1.png
[d73a4650c66f4de195e77f3a1a157722.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/b187f3bac2a44ec4885fcbd99921649d.png
[de4496973e9349a4aba94bc6a87b8201.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f80642d57360462eb30af6d6cbfa0041.png
[44da6a05cbfa46a88e187c6d18c34c4c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1c7e6233bc63450dbd16e897455b2ae8.png
[7507de8b44a940649325090d7c3d54a0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1ff0b9ba95a140c09ef5409d6ef008ed.png
[72fcbdb13b584371b9f014552bddc1c0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4c156346dbe148eb86378efcb16ec0e5.png
[67984178348d4ae2a080a13017d03a2a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/55a3ee24313b465ba0e521e65dacbc79.png
[7bb5d6a75ee74c76bb1180c218dbac2b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/b0eb38ac5c4249009bcb8e87932c3464.png
[70827ba27e8a4fdd937e7f3c701ccc8e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/a2a70510bca6418ca91584a182dc22bc.png
[0bad8df67bd64a78b975159dbb981565.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/65638287cd1246c897cae5b27bfb5057.png
[a688a739b9ad454ebe409f79738dcd90.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1c366b75a14b45969a136e1008a9ac64.png
[b6abe83f6a90443fa66530bf59d42688.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c608c69969ad44e995c6abfd6fb25ce7.png
[f651df9331d24235b29c208ea21799d1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/96d73347fbc14a43bad019139d201543.png
[69a481f0ea1344fa97937943391c62c6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/173ee057774c4d269d5757a1cdd1d10b.png
[8985f6dac41048629259f17e6363b8f2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/70f84792968d4598bcefa41a7c43a241.png
[d7a7b486a800489c93d88854959d6425.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/fff77f5ff8da4aa09d7a5a2c1d759f60.png
[daeb05ec78ea442dbfe5f4b265d97a6c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/aeef213f290f41be9dfebc9af85ea8b1.png
[a18916b151f24273a6441e34ef87c064.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/96fafe7b5d974d70beb56663e0b0ebab.png
[45fe5dbef04d41d3a714812f8d7e1c1b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ab560ec99ce742fea9eda4f3412222ea.png
[c5580835791f4186974c62a2d4849aa2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/2922575b7094499781f5fdd120d7b027.png
[02bbd16921ab4790aa6709eb54bc5f6f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/bf11ae7f732d496398c6b860a6a84b9a.png
[172484e0e9ca49d8adb459206d97daa6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/9db727ff7d7c414bbd58f732f117ce54.png
[7719742530734b3e9fefe3ca2baf317f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/d13aa31be61548fcbf8e44379104a31d.png
[2232270e39794c158b3e468c29f60dfb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/093b20e94df54087bef0b52d3e92b917.png
[3ded6744a7614ab9a6aad04d0928aa5d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5c5b1bb648794ab9a1e7b91ecd363f56.png
[e8891aec08724798be99bcdc58aebd40.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/34ee8585c2f346acbc3954d406433433.png
[c8f5e90960d04d17b8feb3eceb4f5544.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1eed0b8f99ac43c38f9819b4ecdd44b8.png
[89ee53dae23848e1bf01841674fb15fc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/cc0b3f0a9fdf414caae370146036ea3f.png
[de3f80dde255473d8996ab90dc7a9e4c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/74ba95d48c454330ab1fc5fc4e0ae294.png
[84e580db721a46259124649c2d501534.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/27c11183fdd34e8b9cb440005b9695b2.png
[d66e748872ab4f00b1a9e4a31659577f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/a9bd7c50ae464ca9a621898a7e1b0f1d.png
[990909d52046447fb628cf6c51674ead.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/de3add64aff44ad5b28eb95301a1dc48.png
[def946645d3b4f339d3ad3f7cca397a5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/7e1ad8da169443dea3ce319daafb01ab.png
[072a43e664db41788b1f11d871aa780a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e5c873e27acf4df89716719d925ccd72.png
[d9e1b54598b64d1d9e8cf04544601bda.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4cb9a04a70f146d9a2b189c6bfb41136.png
[0574c6e626ae43ecbeadfbf68ecd1588.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/75404bf19cb7428a8952b4d178779ddd.png
[c1d3a69225a44c1495e004e3f0f19605.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/d1add418be154179a556616271627f62.png
[- vue_mounted_ _vue_ - SegmentFault]: https://segmentfault.com/q/1010000042718246/a-1020000042718269
[JS _ _ _bilibili]: https://www.bilibili.com/video/BV1kp4y1e7h8/?spm_id_from=333.337.search-card.all.click&vd_source=704e2597123fc066b03283e82eb866c0