JavaScript之严格模式详述

2021-10-03 11:03:51

文章目录

一、什么是严格模式
二、开启严格模式
- 1、为脚本开启严格模式
- 2、为函数开启严格模式
三、严格模式中的变化

一、什么是严格模式

JavaScript 除了提供正常模式外，还提供了严格模式（strict mode）。ES5 的严格模式是采用具有限制性 JavaScript 变体的一种方式，即在严格的条件下运行 JS 代码。严格模式在 IE10 以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略。
严格模式对正常的 JavaScript 语义做了一些更改：

消除了 Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为。
消除代码运行的一些不安全之处，保证代码运行的安全。
提高编译器效率，增加运行速度。
禁用了在 ECMAScript 的未来版本中可能会定义的一些语法，为未来新版本的 Javascript 做好铺垫。比如一些保留字如：class, enum, export, extends, import, super 不能做变量名。

二、开启严格模式

1、为脚本开启严格模式

为整个脚本文件开启严格模式，需要在所有语句之前放一个特定语句“use strict”;（或‘use strict’;）。
如下：

<script>
　　"use strict";
　　console.log("这是严格模式。");
</script>

当我们给整个script标签添加了下述语句后，就意味着在该标签内，即整个脚本文件中开启了严格模式。但是，要注意的是：因为"use strict"加了引号，所以老版本的浏览器(IE10以前）会把它当作一行普通字符串而忽略。
而且为了防止变量污染，就可以在script标签内部加一个立即执行函数，然后将所有的脚本放入该函数中，就相当于为整个脚本开启一个独立的作用域空间，然后为其开启严格模式，代码如下：

 <script>
        (function(){
            'use strict';
        })()
    </script>

2、为函数开启严格模式

要给某个函数开启严格模式，需要把“use strict”; (或 'use strict';) 声明放在函数体所有语句之前。
例如现在有两个函数，但是我们只想给第一个函数加严格模式，可以进行如下操作：

 <script>
        function f1(){
            'use strict';
        }
        function f2(){
            
        }
    </script>

只需要将严格模式的执行语句添加给第一个函数就可以实现了。

三、严格模式中的变化

严格模式对 Javascript 的语法和行为，都做了一些改变。

1. 变量规定

在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，变量都必须先用var 命令声明，然后再使用。
例如现在有一个函数，我们没有给其变量赋值，在没有给定严格模式前：

<script>
        function f1(){
            num = 10;
            console.log('num的值是：'+num);
        }
    	f1();
</script>

打印结果为：

当我们给该函数添加严格模式后：

<script>
        function f1(){
            'use strict';
            num = 10;
            console.log('num的值是：'+num);
        }
    f1()
    </script>

打印结果为：

打印出错。

严禁删除已经声明变量。例如，delete x 语法是错误的。
将上述的例子给num变量定义后，在删除该变量看看会怎样。

<script>
        function f1(){
            'use strict';
            var num = 10;
            console.log('num的值是：'+num);
            delete num;
        }
    f1()
    </script>

打印结果为：

可知无法删除。

2、严格模式下 this 指向问题

以前在全局作用域函数中的 this 指向 window 对象。严格模式下全局作用域中函数中的 this 是 undefined。

<script>
        function f1(){
            'use strict';
           console.log('严格模式下普通函数的this:'+this);
        }
    f1()

输出结果为：

以前构造函数时不加 new也可以调用,当普通函数，this 指向全局对象。严格模式下,如果构造函数不加new调用, this指向的是undefined，如果给他赋值则会报错。
创建一个构造函数，将其当做普通函数直接调用，因为普通函数正常情况下this的指向是window,

<script>
        function Star(){
            this.name = 'xl';
        }
    Star()
    </script>

打印window.name看看结果：

console.log(window.name);

        打印结果为：

        可以得到属性值。
        而当给该构造函数加入严格模式后打印的结果为：

        可知打印有误，这是因为在严格模式下，普通函数的this指向undefine。

new 实例化的构造函数指向创建的对象实例。
那如果给构造函数通过new实例化后呢？我们试一下。

<script>
        function Star(){
            'use strict'
            this.name = 'xl';
        }
    var s = new Star();
    console.log(s.name);
    </script>

打印的结果为：

即严格模式下new 实例化的构造函数指向创建的对象实例

定时器 this 还是指向 window。
那在定时器的严格模式下this又是如何指向的呢？
如下：

<script>
        'use strict'
        setTimeout(function(){
            console.log(this);
        })
    </script>

打印结果为：

可知，在该模式下，定时器 this 还是指向 window。

事件、对象还是指向调用者。
在严格模式下事件、对象中的this还是指向调用者，方法同上，就不在赘述。

3、函数变化

函数不能有重名的参数。
举例说明，比如现在有一个函数，我们将它的两个形参命名相同，在进行相应的操作，如下：

 <script>
        'use strict'
       function fn(a,a){
           console.log(a+a);
       }
       fn(1,2)
    </script>

        打印的结果为：

        可以发现能够正常运行。但是运行的结果却是错误的。为什么呢？这是因为当我们给两个相同的参数时，第二个的值或覆盖掉第一个参数的值。
        那么在严格模式下呢？

<script>
        'use strict'
       function fn(a,a){
           console.log(a+a);
       }
       fn(1,2);
</script>

可知运行出错。所以函数不能有重名的参数。

函数必须声明在顶层，新版本的 JavaScript 会引入“块级作用域”（ ES6 中已引入）。为了与新版本接轨，不允许在非函数的代码块内声明函数。

例如下面的代码就是错误的。

if(n === 3){
	function fn(){
		conssole.log('您输入的值是2');
	}
	fn();
}

for(var i =0;i<=5;i++){
        function fn(){
            console.log('你好')
        }
        fn();
    }

想知道更多严格模式要求请点击该链接

码农公寓