为了账号安全,请及时绑定邮箱和手机立即绑定

复习+学习 闭包

标签:
Html5 JavaScript

今天的内容其实挺有分量的,首先我要说一下今天是复习的最后一天,当时学到这里就断了,内心有点小激动,因为终于结束了复习的痛苦,还是接受新知识比较有动力,今天的内容也是挺够分量的是一些关于闭包、递归、以及函数的方法的一些应用

1、

先来一个开胃小菜,es5新增的改变this指向的一个方法,bind,我觉得他与另外两个不同,以为他不会被调用,刚开始认识我还以为这个用的最少应该,其实才发觉这才是大哥,他用的最多,他的一个案例也很经典,点击一个按钮,点过后就禁用三秒后就需要回到可以点击的状态,关于定时器的this指向问题,在注释里面也说了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击</button>
    <script>
        var btn = document.querySelector('button')
        btn.addEventListener('click', function() {
            this.disabled = true
            setTimeout(function() {
                this.disabled = false
            }.bind(this),3000) 
            // 这里不能用call apply 因为这里不能立即执行 什么叫做立即执行 也就是当运行完禁用按钮过后运行定时器的时候 不用等待立即执行 所以就看不到我们需要的效果 所以这里就要应用bind来达到即实现了改变this又不会立即执行
        }) 
    </script>
</body>
</html>

然后今天的第二个案例是关于闭包的,点击li输出索引号,感觉与闭包打交道最多的今天哈,基本都是处理一些回调函数的异步问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        // 以前的方法就添加类名点哪个取哪个即可,现在要用闭包的想法完成
        var lis = document.querySelectorAll('li')
        for (var i = 0; i < lis.length; i++) {
                /* 这里直接输出i是不行的,为什么不行因为这关乎到一个同步与异步任务的情况,前面的for循环是同步任务,最先执行完,而异步任务也就是
                回调函数,典型的事件、定时器、ajax这三个必须等到同步任务执行完了才回去执行异步任务,所以这里直接输出i的话只会得到最后一个i
                这里不用以前老方法,那就需要用到闭包的应用了,for循环四次那就得到四个立即执行函数,把i传进去,再在里面绑定事件,接收i的值 */
            (function(i) {
                lis[i].onclick = function() {
                    console.log(i);
                    // 还有这里是有闭包的产生的,用到了局部变量i
                }
            })(i)
        }
    </script>
</body>
</html>

第三个是三秒后输出li里面的内容,很明显要用到定时器,很明显又要碰到异步回调函数了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        var lis = document.querySelectorAll('li')
        for (var i = 0 ; i < lis.length; i++) {
            /* setTimeout(function() {
                console.log(lis[i].innerHTML);
            },3000)
            这样做会报错,为什么,还是那个道理,这里是异步任务,等你定时器开始运行了,i已经来到了最后一个 */
            (function(i) {
                setTimeout(function() {
                    console.log(lis[i].innerHTML);
                }, 3000);
            }) (i)
        }
    </script>
</body>
</html>

第四个感觉是一个综合应用闭包的案例,说实话这种处理方式,我第一次见,而且也并没有想到能这么来处理,一个关于打车价格的案例,对于这些不熟悉的我以后肯定会多加练习的,毕竟现在做了第二遍就已经开始慢慢熟悉这种编程方式了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 打车起步价13(3公里以内) 超出一公里多收五元 用户可以输入计算打车的价格 如果有拥堵情况 多收取十元
        // 这个应用的迷茫点在于 公里以及拥堵情况我想的是用prompt由用户来输入 但是如果要更结合开发的话 应该是为函数的实参
        var car = (function() {
            var start = 13
            var price = 0
            // 重点 返回一个对象 里面有方法 那么此时形成了闭包 同时外面也可以直接调用且可输入实参
            return {
                price : function(n) {
                    if (n <= 3) {
                        price = start
                    } else {
                        price = start + (n - 3) * 5
                    }
                    return price
                },
                du : function(flag) {
                   return flag ? price + 10 : price
                }
            }
        })()
        // 把立即执行函数赋值给这个car 意思就是首先要立即执行 然后里面有个return返回值 所以就会把这个return给到这个car
        console.log(car.price(5))
        console.log(car.du(true))
    </script>   
</body>
</html>

插入一个思考题,这道题对我最大的一个感触就是,函数的那个双重调用方式,而且调来调去就调到外面来了,this还变成了window,第一个函数挺能说明一些问题的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 有无闭包产生? 结果是什么?
        /* var name = 'window object'
        var object = {
            name : 'my object',
            getNameObject : function() {
                return function() {
                    console.log(this.name);
                }
            }
        }
        console.log(object.getNameObject()()); */
        // 首先上面的输出形式要搞清楚 先是调用对象里面的方法 调用过后相当于返回了一个函数 所以要继续调用该函数 
        // 明确了执行方法过后 要注意调用返回了函数过后 相当于这个函数声明 到了该函数外部来了 
        /* // var f = (object.getNameObject() 那么此时f = function() {
                    console.log(this.name);
                } */
        // 所以要注意此时的this是Window 所以就知道输出什么了吧 然后就是闭包的问题这里很明显没有闭包 虽然形成了函数嵌套 但是没有变量的利用
        // 第二个
        var name = 'window object'
        var object = {
            name : 'my object',
            getNameObject : function() {
                var that = this
                return function() {
                    console.log(that.name);
                }
            }
        }
        console.log(object.getNameObject()())
        // 这个很明显形成了闭包 且 输出也是属性的name 但是此时的this他还是window
    </script>
</body>
</html>

前端爱好者,望大佬给个内推机会!!!

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
0
获赞与收藏
1

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消