深入理解ES6--块级作用域(let const)

原创 2017年09月03日 23:19:12

var 声明及变量提升机制

var 的声明提升机制 —> 在函数作用域或全局作用域中通过关键字var 声明的变量,无论实际在哪里声明,都会被当成在当前作用域(ES5作用域,只有函数能起到块级作用域的目的)顶部声明的变量.
var 声明的变量会覆盖window的原有对象

var value;
if(true){
    //可以重复声明
    var value = 1;
}
//本应该只作用在if 花括号之内
console.log(value);//1;
var Math = 1; //window.Math === Math  true

ES6 的块级声明

let 声明

1.let 不能重复声明
2.只作用在当前代码块
3.声明的变量不会覆盖window 上面的变量

if(true){
    let value = 1;
}
console.log(value);//undefined;

let Math = 1; //window.Math === Math  false
/*带来的问题:
当你使用iframe去调用对象的时候.由于let 声明的变量不在window上面,
无法通过iframe调用,所以这种情况需要使用var来声明变量 */

const 声明

const表示声明的是常量,和let 一样也是块级作用域
1.const 不能重复声明
2.声明同时需要赋值
3.不能重复赋值
4.声明的是对象的话,可以修改对象的内容
5.声明的变量不会覆盖window 上面的变量

const val; // 语法错误,常量未初始化
const value = 1;
if(true){
    //作用域不同可以声明,let 可以置换为const
    let value = 1;
}
value = 2; //语法错误,不能重复赋值 

const obj = {};
obj.xx = "xx";//可以修改对象的内容
obj = 1;//错误,不能修改obj 的绑定

临时死区

用来描述let 和const 声明的变量不提升的效果

if(true){
    console.log(typeof value);//错误:value is not defined
    let value = 'val';
}

循环中的声明

    var funcs = [];
    for (var i = 0; i < 10 ; i++) {
        funcs.push(function(){
            console.log(i);
        })
    }
    funcs.forEach(function(v){
        v(); //输出 10次10,让新手很痛苦的问题,需要用闭包解决,在此就不赘述
    })

    var funcs = [];
    for (let i = 0; i < 10 ; i++) {
        funcs.push(function(){
            console.log(i);
        })
    }
    funcs.forEach(function(v){
        v(); //输出0,1,2,3,4,5,6,7,8,9
    })
    //const 的话会报错,再循环中,for(let i=0;i<10;i++)
    //相当于给 i 赋值10次,const 不能重复赋值所以报错

    for(const key in obj){
        //当const 遍历对象 ,循环迭代,不会报错
    } 
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

js中数组过滤、遍历、迭代every、some、filter、map、forEach、reduce、reduceRight

全栈工程师开发手册 (作者:栾鹏) js系列教程1-数组操作全解js中数组遍历迭代serialize()序列化,将元素转化为xx=xx&xx=xx&xx=xx字符串形式,不仅能用于表单。代码如下:va...

一个demo学会css

一个demo学会css css选择器全解 css操作语法全解一个demo学会css:学习了css权威指南这本书,自己喜欢边学边总结边写demo,所以写了这篇文章,包含了大部分的css编程知识。让你...

js实现进制之间的转换

需求: 将十进制转换为任意进制 将任意进制转换为十进制 代码实现: 进制之间的转换 //将任意进制转换为十进制 parseInt一个参...

javascript 构造函数和new操作符

javascript 构造函数和new操作符 {…}语法允许创建一个对象,但如果需要创建多个类似的对象,则我们需要使用构造函数和“new”操作符。 构造函数构造函数技术上就是正常的函数,但一般有两...

图解原型原型链

图解原型原型链原型 ?在“类”中(也就是函数中)的prototype就指向一个原型对象,在实例中,__proto__就指向的是一个构造它的那个“类”(函数)的原型,通过protoype与__proto...

深入理解ES6 --解构

前言对象和数组字面量是JavaScript中两种最常用的数据结构,由于JSON数据格式的普及,二者已经成为语言中特别重要的一部分.在编码过程中,我们经常定义许多对象和数组,然后有组织的从中提取相关的信...

threejs概览

本文讲述threejs的总体概况,希望从一个较高的角度看threejs到底能做什么

js系列教程8-事件全解

printf("===========事件绑定==========="); //时间可以在h5代码中直接添加也可以在js代码中添加 var input1=document.getElementById...

js中数组增删查改unshift、push、pop、shift、slice、indexOf、concat、join

全栈工程师开发手册 (作者:栾鹏) js系列教程1-数组操作全解js中数组增删查改代码如下://元素增加 var names=[]; //定义数组并...

js系列教程7-DOM操作全解

全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)