ES6的let,const 变量,常量声明符
2017-03-25 00:42

let,const

let是用来声明变量的,const是用来声明常量的。他们两个的作用域都是块级别的。所谓块级别,就是一个大括号就是一个块,跟java中的块级别是一个意思。

function decalre(){
    let y;
    {
        const y=10;
        //报错,常量不能赋值。
        y=20;
        const obb={name:"mooshine"};
        //正确,常量是对象时,对象的属性可以重新赋值。
        obb.name="sunshine";
    }
    //引用的是let定义的y。const的y只在上面的大括号内有效。
    y=20;
    //报错,let变量不能重复声明。
    let y=30;
}

常量定义const不用多说,跟var的区别很明显,除了作用域不同外,它是常量,定义的时候就需要赋值,且不能修改。

而let跟var的区别就只有作用域不同了,var的作用域是函数级别的,let的作用域是块级别的。

var wf="sunshine";
let gr="star";
//sunshine
console.log(window.wf);
//undefined
console.log(window.gr);

let定义的变量不会绑定到全局上,因为let的作用域是块级别的,const也一样不会板顶到全局对象上。

对于let,const的讲解到这也就结束了。这两个声明符很好理解。let的块状作用域有什么用途呢?

{
    let x= 0,y= 0,z=0;
    let slider=function(){
        return new slider.fn.init();
    }
    slider.prototype=slider.fn={
        init:function(){
            console.log("init...");
        }
    };
    slider.fn.init.prototype=slider.fn;
    window.slider=slider;
}

使用let定义变量,我们在实现js插件的时候就可以不使用闭包的形式,而使用块的形式,而let作用域只在快中起作用,同样也能避免变量的污染和冲突。

下面有这么一个html结构

<ul>
    <li>mooshine</li>
    <li>sunshine</li>
    <li>starshine</li>
</ul>

我们先用var来遍历绑定click事件

var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
    lis[i].onclick=function(){
        console.log(i);
    }

从上到下,一次点击li的结果如下:

blob.png

这个结果,有经验的前端开发人员是很熟悉的,因为在循环完成后,i的值变成了3,所以点击哪个li打印的都是3。

而同样的代码,我们使用let定义变量:

var lis=document.getElementsByTagName("li");
for(let i=0;i<lis.length;i++){
    lis[i].onclick=function(){
        console.log(i);
    }
}

一次点击li的结果如下:

blob.png

let定义i,达到了我们的预期结果。这是因为for循环的()小括号中的三个语句其实是算在大括号的块级作用域中的。那么每次循环都会产生一个块级作用域,在块级作用域中绑定click事件引用的“i”变量就是不同的i了。由于click事件引用了块级作用域中的“i”,所以“i”会在click回调函数的作用域链中保存。这样使用let就能简化我们的代码了。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(2478)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1