[JavaScript知识库] JS严格模式闭包

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JS严格模式闭包 -> 正文阅读

[JavaScript知识库]JS严格模式闭包

严格模式

【严格模式对正常的 JavaScript 语义做了一些更改】
1、消除JavaScript 语法的一些不合理,不严谨之处,减少了一些怪异行为
2、消除代码运行的一些不安全之处, 保证代码运行的安全
3、提高编译效率增加运行速度
4、禁用了在 ECMAScript 的未来版本中可能会定义的一些语法，为未来新版本的JavaScript做好铺垫，比如一些保留字

- 严格模式的分类

为脚本开启严格模式
为函数开启严格模式

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

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

- 严格模式的变化

变量名必须先声明再使用
不能随意删除已经声明好的变量
严格模式下全局作用域中函数的 this 指向 undefined
严格模式下如果构造函数不加 new 调用， this 指向的是undefined
定时器中的 this 还是指向 window

    <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>

高阶函数

【函数也是一种数据类型也可以作为参数传递】
【高阶函数是对其他函数进行操作的函数，它将函数作为参数或者返回一个函数】

    <script>
        // 高阶函数- 函数可以作为参数传递
        function fn(a, b, callback) {
            console.log(a + b);
            callback && callback();
        }
        fn(1, 2, function() {
            console.log('我是最后调用的');

        });
        $("div").animate({
            left: 500
        }, function() {
            $("div").css("backgroundColor", "purple");
        })
    </script>

闭包

【闭包是指有权访问另一个函数作用域中变量的函数】

    <script>
        // 闭包（closure）指有权访问另一个函数作用域中变量的函数。
        // 闭包: 我们 fun 这个函数作用域 访问了另外一个函数 fn里面的局部变量 num  fn是一个闭包函数
        function fn() {
            var num = 10;

            function fun() {
                console.log(num);
            }
            fun();
        }
        fn();
    </script>

- 闭包的作用

【闭包的主要作用：延伸了变量的作用范围】

    <script>
        // 闭包（closure）指有权访问另一个函数作用域中变量的函数。
        // 一个作用域可以访问另外一个函数的局部变量 
        // 我们fn 外面的作用域可以访问fn 内部的局部变量 fn 是一个闭包函数
        // 闭包的主要作用: 延伸了变量的作用范围
        function fn() {
            var num = 10;

            function fun() {
                console.log(num);
            }
            return fun;
        }
        var f = fn();
        f();
        // 类似于
        // var f =  function fun() {
        //         console.log(num);
        //     }
    </script>

- 闭包应用【点击 li 输出索引值和内容】

    <script>
        // 闭包应用-点击li输出当前li的索引号
        // 1. 我们可以利用动态添加属性的方式
        var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].index = i;
            lis[i].onclick = function() {
                // console.log(i);// 打印出的全部都是 4 
                console.log(this.index);
            }
        }
        // 2. 利用闭包的方式得到当前小li 的索引号
        for (var i = 0; i < lis.length; i++) {
            // 利用for循环创建了4个立即执行函数
            // 立即执行函数也成为小闭包 因为立即执行函数里面的任何一个函数都可以使用它的 i 这变量
            (function(i) {
                // console.log(i);
                lis[i].onclick = function() {
                    console.log(i + "----" + lis[i].innerHTML);
                }
            })(i);
        }
    </script>