首页 > Web开发 > 详细

JS的var和let的区别(详细讲解)

时间:2020-01-17 02:11:04      阅读:104      评论:0      收藏:0      [点我收藏+]

let是ES6新增的,它主要是弥补var的缺陷,你也可以把let看做var的升级版。下面我就来详细讲讲var和let的区别

相同点:

var和let都有函数级作用域

 

不同点:

(1)var是全局作用域,let不是

var 和 let 声明的变量在全局作用域中被定义时,两者非常相似。但是,被let声明的变量不会作为全局对象window的属性,而被var声明的变量却可以

let  a = ‘aaa;
var b = ‘bbb‘; 

console.log(window.a); // undefined
console.log(window.b);  //‘bbb‘

(2)var没有块级作用域,let有快级作用域

let有块级作用域,而var没有块级作用域,这是二者最明显的区别。例如:

var func;
if(1 == 1){
    var name = "LHS"
    func = function(){
        console.log(name)
    }
}

name = "ljq";
func();//输出的:ljq

一般情况我们都希望把块级内的与块级内数据区分,但var没有块级作用域,只有函数作用域

如果大家还不理解,我再举例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>闭包</title>
        <style type="text/css">
            div {
                width: 100px;
                height: 100px;
                background: lightgreen;
                float: left;
                margin: 20px;
                font: 30px/100px "microsoft yahei";
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div>a</div>
        <div>b</div>
        <div>c</div>
        <div>d</div>
        <div>e</div>
        <div>f</div>
        <div>g</div>
        <div>h</div>
        <div>i</div>
        <div>j</div>
    </body>
    <script type="text/javascript">
        var divs=document.getElementsByTagName("div");
        for (var i=0;i<divs.length;i++) {
            divs[i].onclick=function(){
               alert(i);//都是输出:10
            }
        }
    </script>
</html>

运行结果,点击输出都是10

技术分享图片

以上问题就是var没有块级作用域,我们可以把函数作用域代替了块级作用域,用闭包解决问题:

var divs=document.getElementsByTagName("div");
for (var i=0;i<divs.length;i++) {
    (function(i){
        divs[i].onclick=function(){
            alert(i);
        }
    })(i)
}

闭包写起来有点麻烦,但使用let的话就可以一步到位:

var divs=document.getElementsByTagName("div");
for (let i=0;i<divs.length;i++) {
    divs[i].onclick=function(){
        alert(i);
    }
}

结果跟使用闭包一样,但比闭包简单

(3)var属于ES5规范,let属于ES6规范

 

JS的var和let的区别(详细讲解)

原文:https://www.cnblogs.com/bushui/p/12203766.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!