严格模式 丨JavaScript 函数进阶

Posted 黑马程序员官方

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了严格模式 丨JavaScript 函数进阶相关的知识,希望对你有一定的参考价值。

1、什么是严格模式

javascript 除了提供正常模式外,还提供了严格模式(strict mode)。ES5 的严格模式是采用具有限制性

JavaScript 变体的一种方式,即在严格的条件下运行 JS 代码。

严格模式在 IE10 以上版本的浏览器中才会被支持,旧版本浏览器中会被忽略。

严格模式对正常的 JavaScript 语义做了一些更改:

1. 消除了 Javascript 语法的一些不合理、不严谨之处,减少了一些怪异行为。

2. 消除代码运行的一些不安全之处,保证代码运行的安全。

3. 提高编译器效率,增加运行速度。

4. 禁用了在 ECMAScript 的未来版本中可能会定义的一些语法,为未来新版本的 Javascript 做好铺垫。比如一些保留字如:class, enum, export, extends, import, super 不能做变量名

2、 开启严格模式

严格模式可以应用到整个脚本个别函数中。因此在使用时,我们可以将严格模式分为为脚本开启严格模式为函数开启严格模式两种情况。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 为整个脚本(script标签)开启严格模式 -->
    <script>
        'use strict';
        //   下面的js 代码就会按照严格模式执行代码
    </script>
    <script>
        (function() 
            'use strict';
        )();
    </script>
    <!-- 为某个函数开启严格模式 -->
    <script>
        // 此时只是给fn函数开启严格模式
        function fn() 
            'use strict';
            // 下面的代码按照严格模式执行
        

        function fun() 
            // 里面的还是按照普通模式执行
        
    </script>
</body>

</html>

2.1 脚本开启严格模式

为整个脚本文件开启严格模式,需要 在所有语句之前放一个特定语句“use strict”;(或‘use strict’;)

 因为"use strict"加了引号,所以老版本的浏览器会把它当作一行普通字符串而忽略。

有的 script 基本是严格模式,有的 script 脚本是正常模式,这样不利于文件合并,所以可以将整个脚本文件放在一个立即执行的匿名函数之中。这样独立创建一个作用域而不影响其他 script 脚本文件。

2.2函数开启严格模式

要给某个函数开启严格模式,需要 把“use strict”; (或 'use strict'; ) 声明放在函数体所有语句之前

将 "use strict" 放在函数体的第一行,则整个函数以 "严格模式" 运行。

2.3 严格模式中的变化

严格模式对 Javascript 的语法和行为,都做了一些改变。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        'use strict';
        // 1. 我们的变量名必须先声明再使用
        // num = 10;
        // console.log(num);
        var num = 10;
        console.log(num);
        // 2.我们不能随意删除已经声明好的变量
        // delete num;
        // 3. 严格模式下全局作用域中函数中的 this 是 undefined。
        // function fn() 
        //     console.log(this); // undefined。

        // 
        // fn();
        // 4. 严格模式下,如果 构造函数不加new调用, this 指向的是undefined 如果给他赋值则 会报错.
        // function Star() 
        //     this.sex = '男';
        // 
        // // Star();
        // var ldh = new Star();
        // console.log(ldh.sex);
        // 5. 定时器 this 还是指向 window 
        // setTimeout(function() 
        //     console.log(this);

        // , 2000);
        // a = 1;
        // a = 2;
        // 6. 严格模式下函数里面的参数不允许有重名
        // function fn(a, a) 
        //     console.log(a + a);

        // ;
        // fn(1, 2);
        function fn() 
    </script>
</body>

</html>
2.3.1. 变量规定
  • 在正常模式中,如果一个变量没有声明就赋值,默认是全局变量。严格模式禁止这种用法,变量都必须先用var 命令声明,然后再使用。
  • 严禁删除已经声明变量。例如,delete x; 语法是错误的。

2.3.2 严格模式下 this 指向问题

① 以前在全局作用域函数中的 this 指向 window 对象。 ② 严格模式下全局作用域中函数中的 this 是 undefined。 ③ 以前构造函数时不加 new也可以 调用,当普通函数,this 指向全局对象 ④ 严格模式下,如果 构造函数不加new调用, this 指向的是undefined 如果给他赋值则 会报错 ⑤ new 实例化的构造函数指向创建的对象实例。 ⑥ 定时器 this 还是指向 window 。 ⑦ 事件、对象还是指向调用者。


2.3.3. 函数变化

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

更多严格模式要求参考:https://developer.mozilla.org/zhCN/docs/Web/JavaScript/Reference/Strict_mode

更多JavaScript内容:

黑马程序员JavaScript全套教程,Web前端必学的JS入门教程,零基础JavaScript入门

黑马前端专栏干货多多,关注再学,好方便~

2023年前端学习路线图:课程、源码、笔记,技术栈另外此线路图实时更新!需要课后资料的友友们,可以直接告诉我喔~

以上是关于严格模式 丨JavaScript 函数进阶的主要内容,如果未能解决你的问题,请参考以下文章

ReactNative进阶(二十三):Javascript 严格模式详解

改变函数内部 this 指向丨JavaScript 函数进阶

闭包和递归 丨JavaScript 函数进阶

JavaScript 函数进阶丨 函数的定义和调用

js函数进阶

JavaScript严格模式