ES6 严格模式&高阶函数&闭包

最新推荐文章于 2024-09-04 20:18:34 发布

前端新手2022

最新推荐文章于 2024-09-04 20:18:34 发布

阅读量105

点赞数

分类专栏： ES6 文章标签： es6 javascript 前端

本文链接：https://blog.csdn.net/qq_35112578/article/details/126437749

版权

ES6 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

为脚本添加严格模式：‘use strict’

 <!-- 为整个脚本添加严格模式 -->
    <!-- 方法一 -->
    <script>
        'use strict'
        // 以下代码会开启严格模式
    </script>
    <!-- 方法二 -->
    <script>
        (function(){
            'use strict'
        })()
    </script>

为函数添加严格模式：

//为某个函数添加严格模式 
function fn(){
            'use strict'
        }

注意事项

严格模式下，不得随意删除已经声明好的变量
严格模式下，全局函数this指向的是undefined
严格模式下，变量不声明就使用会报错
严格模式下，构造函数，不加new，就调用，会报错
严格模式下，函数里的参数不能有重名
严格模式下，不允许在非函数模块使用，比如，if或for

高阶函数：以函数作为参数或者将函数作为返回值的函数

闭包：指有权访问另一个函数作用域中变量的函数，闭包延伸了局部变量的作用范围

案例1 循环注册点击事件

// 案例一：点击获得相应索引号

        // 方法一
        let lis = document.querySelectorAll('li')
        // for (let i = 0; i < lis.length; i++) {
        //     lis[i].addEventListener('click', function () {
        //         alert(i)
        //         console.log(i)
        //     })
        // }

        // 方法二  闭包的做法
         for (let i = 0; i < lis.length; i++) {
            // 利用for循环创建四个立即执行函数
            (function(i){  
                lis[i].addEventListener('click', function () {
                alert(i)
                console.log(i)
            })})(i)
           
         }

案例2 3秒后打印所有小li里的内容

 //  案例二：3秒钟打印li里面的所有内容
        let lis = document.querySelectorAll('li')
        setTimeout(function(){
            for (let i=0;i<lis.length;i++){
                console.log(lis[i].innerHTML)
            }
        },3000)

案例3 计算打车价格

   // 3公里内13元，之后每多一公里增加5元，拥堵的话，增加10元拥堵费
        // 立即执行函数
        let car = (function () {
            const Start = 13  //起步价
            let total = 0    //总价

            return {
                //正常总价
                price: function (i) {
                    if (i <= 3) {

                        total = Start

                    } else {

                        total = Start + 5 * (i - 3)

                    }

                    return total
                },
                //拥堵费用
                duche: function (flag) {
                    return flag ? total + 10 : total
                }
                //  console.log('总价是：'+total+'元')
            }
        })()
        console.log(car.price(5))
        console.log(car.duche(true))