专栏首页smh的技术文章javascript中变量提升以及处理方法

javascript中变量提升以及处理方法

很久没更新文章了,主要是懒,还有学校的作业,所以抽不开时间。

今天我们来说说js中变量提升,for循环作用域在使用过程中遇到的一些问题,并解决。

在我以前的文章中:javascript中的变量提升的简单说明 ,中已经说了变量提升的要点了,所以我这篇不赘述,这篇和此篇有一些关联性,所以我希望各位可以先看完javascript中的变量提升的简单说明在来观看此篇文章,效果会更好。

我们从一个实际的例子开始:

        var list = document.getElementsByTagName('li')
        for (var i = 0; i < 5; i++) {
            list[i].onclick = function () {
                console.log(i);
            }
        }

大家想想点击li之后,控制台会输出什么?是0,1,2,3,4等等吗?

其实只会输出一个数字,那就是5,这是为什么呢?

首先第一个知识点,就是作用域,js的for循环是没有作用域的,跟java,c#这类后端语言不一样,在for中定义的变量,所以i这个变量是在全局上的。

然后第二个知识点,就是变量提升,js把i这个变量提升到作用域的顶端,不赋值。这里听不懂赶紧回去看javascript中的变量提升的简单说明

最后我们的点击事件肯定是在for循环执行完之后,循环执行完后,i这个变量已经被赋值为5了,所以点击所有li,都只会输出5。

好了,产生的原因已经说清楚了,接下来说怎么解决,目前我处理有两个方法。

1:使用IIFE(立即执行函数)

原因:因为立即执行函数有自己的作用域,把变量传入进去之后,不会担心被外部修改,代码如下:

        var list = document.getElementsByTagName('li')
        for (var i = 0; i < 5; i++) {
            (function (is) {
                list[i].onclick = function () {
                  console.log(is);
                }
            })(i)
        }

 2:使用let来声明变量

使用let来声明变量i,这是es6的新语法,使用let之后,在for中就有自己的作用域,把var换成let即可,代码省略

好了,今天到处为止。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • var和let声明变量时的一些区别

    1.如果在全局作用域中用var声明变量,此变量会默认成为window的一个属性,let声明的变量则不会添加到window对象中。

    小明爱学习
  • CSS之层叠值

    层叠会在众多CSS样式解析样式规则,解决冲突,为每个CSS属性设置一个最终值。可以理解就是样式优先级的过程。

    小明爱学习
  • CSS之层叠值

    由于样式表只有两种来源,所以优先级很简单,用户自定义样式表高于浏览器默认样式表。

    小明爱学习
  • Python设计模式(10):迭代器模式

    在面向对象的软件设计中,如果一个系统有比较复杂的数据结构,客户程序往往没有必要详细地知道其内部的实现。为了使用方便,该系统应该提供给客户程序一种遍历方法。该遍历...

    不可言诉的深渊
  • “互联网+”时代,如何应战?

    港湾人儿
  • APP,Activity的启动速度优化

    以上打印出了所谓的thisTime和totalTime,thisTime是指当前Activity的启动时间,正常情况下,如果从桌面启动一个Activity,那么...

    大大大大大先生
  • Android Activity的生命周期

    通过上一节“Android系列之四:Android项目的目录结构”我们已经知道了什么是Activity,那么为什么我们创建一个Activity的导出类的时候为什...

    飞雪无情
  • 什么是不完全类型?

    C/C++中不完全类型有三种不同形式:void、未指定长度的数组以及具有非指定内容的结构和联合。使用不完全类型的指针或引用,不需要知道类型的全部内容。 比如:

    GorgonMeducer 傻孩子
  • 【Leetcode】109.有序链表转换二叉搜索树

    本题中,一个高度平衡二叉树是指一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1。

    Leetcode名企之路
  • Android开发之浮动Activity

    场景 在使用App时,曾经看到这样一个场景,如下图所示,点击顶部菜单按钮,有一个类似的对话框的列表显示出来,让用户选择其中的一个快递选项,然后选中的快递信息就会...

    YungFan

扫码关注云+社区

领取腾讯云代金券