js之var 和 let

作者: 关耳木南 | 来源:发表于2019-06-19 18:33 被阅读0次

js之var 和 let
JS困惑之var和let
【JS】var、let
js 2022经典面试题汇总
【JS】从ECMA学习let、const、var变量声明与声明提
3小时入门javascript
2018-09-04
ES6语法
js ------ let 和 var 的区别
js中的let和var

<head>
    <title></title>
    <style type="text/css">
        div{
            width:50px;
            height:30px;
            background-color: pink;
            margin:10px;
        }
    </style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<script type="text/javascript">
// 变量生效的区域就叫做作用域
// es5  2类
//      全局作用域
//      函数作用域
// es6  新增块作用域   let const
//      块作用域指 ；{}
//      无论什么情况下只要没有声明就使用赋值的变量，会成为类
//      似全局作用域的变量。
//      没有声明就赋值的变量会泄露，成为顶层/全局window对象的属性
//      var 和 function 声明的全局变量会污染顶层对象的属性环境
//               const 不允许二次赋值
    if(true){
        let a=1;
        console.log(a)//1
    }
     //console.log(a);//undefined
     //
     //
     //
// 10个div点击某个获取某个的序号
    var div = document.getElementsByTagName("div");
    for (var i = 0; i< div.length; i++) {
        div[i].idx = i;//自定义一个属性
        div[i].onclick = function(){ 
            console.log(this.idx)
        } 
    }
    // 以let定义获取序号的方法
        for (let i = 0; i< div.length; i++) {
        div[i].onclick = function(){ 
            console.log(i)
        } 
    }
</script>