JavaScript之严格模式详述

2021/11/23 1:09:56

本文主要是介绍JavaScript之严格模式详述,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

文章目录

  • 一、什么是严格模式
  • 二、开启严格模式
    • 1、为脚本开启严格模式
    • 2、为函数开启严格模式
  • 三、 严格模式中的变化
    • 1. 变量规定
    • 2、严格模式下 this 指向问题
    • 3、函数变化

一、什么是严格模式

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

  1. 消除了 Javascript 语法的一些不合理、不严谨之处,减少了一些怪异行为。
  2. 消除代码运行的一些不安全之处,保证代码运行的安全。
  3. 提高编译器效率,增加运行速度。
  4. 禁用了在 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. 变量规定

  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>

        打印结果为:
在这里插入图片描述
        打印出错。

  1. 严禁删除已经声明变量。例如,delete x 语法是错误的。
            将上述的例子给num变量定义后,在删除该变量看看会怎样。
<script>
        function f1(){
            'use strict';
            var num = 10;
            console.log('num的值是:'+num);
            delete num;
        }
    f1()
    </script>

        打印结果为:
在这里插入图片描述
        可知无法删除。

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

  1. 以前在全局作用域函数中的 this 指向 window 对象。 严格模式下全局作用域中函数中的 thisundefined
<script>
        function f1(){
            'use strict';
           console.log('严格模式下普通函数的this:'+this);
        }
    f1()

        输出结果为:
在这里插入图片描述

  1. 以前构造函数时不加 new也可以 调用,当普通函数,this 指向全局对象。严格模式下,如果构造函数不加new调用, this指向的是undefined,如果给他赋值则会报错。
    创建一个构造函数,将其当做普通函数直接调用,因为普通函数正常情况下this的指向是window,
<script>
        function Star(){
            this.name = 'xl';
        }
    Star()
    </script>

        打印window.name看看结果:

console.log(window.name);

        打印结果为:
在这里插入图片描述
        可以得到属性值。
        而当给该构造函数加入严格模式后打印的结果为:
在这里插入图片描述
        可知打印有误,这是因为在严格模式下,普通函数的this指向undefine

  1. new 实例化的构造函数指向创建的对象实例。
    那如果给构造函数通过new实例化后呢?我们试一下。
<script>
        function Star(){
            'use strict'
            this.name = 'xl';
        }
    var s = new Star();
    console.log(s.name);
    </script>

        打印的结果为:
在这里插入图片描述
        即严格模式下new 实例化的构造函数指向创建的对象实例

  1. 定时器 this 还是指向 window
    那在定时器的严格模式下this又是如何指向的呢?
    如下:
<script>
        'use strict'
        setTimeout(function(){
            console.log(this);
        })
    </script>

        打印结果为:
在这里插入图片描述
        可知,在该模式下,定时器 this 还是指向 window

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

3、函数变化

  1. 函数不能有重名的参数。
    举例说明,比如现在有一个函数,我们将它的两个形参命名相同,在进行相应的操作,如下:
 <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>

在这里插入图片描述
        可知运行出错。所以函数不能有重名的参数。

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

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

if(n === 3){
	function fn(){
		conssole.log('您输入的值是2');
	}
	fn();
}
for(var i =0;i<=5;i++){
        function fn(){
            console.log('你好')
        }
        fn();
    }

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



这篇关于JavaScript之严格模式详述的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程