小白学《深入理解es6》--块级作用域绑定

fox_soyoung 发布于2019-08-20 18:04 / 1769人阅读

摘要：块级声明前是没有块级作用域的，比如外可以访问内部的变量。循环中的块作用域绑定我们经常使用循环发现了什么在循环执行后，我们仍然可以访问到变量。

var声明及变量提升机制

在ES6之前，在函数作用域中或者全局作用域中通过var关键字来声明变量，无论是在代码的哪个位置，这条声明语句都会提到最顶部来执行，这就是变量声明提升。

注意：只是声明提升，初始化并没有提升。

看一个例子：

function getStudent(name){
  if(name){
    var age=25;
  }else{
    console.log("name不存在");      
  }
  console.log(age); //undefined
}

如果按照预想的代码的执行顺序，当name有值时才会创建变量age，可是执行代码发现，即使不传入name，判断语句外的输出语句并没有报错，而是输出undefined。

这就是变量声明提升。

块级声明

ES6前是没有块级作用域的，比如{}外可以访问内部的变量。

let声明

声明变量

作用域限制在当前代码块

声明不会提升

禁止重声明（同一作用域不行，可以覆盖外部同名变量）

function getStudent(name){
  if(name){
    let age=25;
    console.log(age); //25
  }else{
    console.log("name不存在");      
  }
  console.log(age); //age is not defined
}

和上文一样的代码，只是将age的命名关键字从var改成了let，在执行getStudent()和getStudent("axuebin")时都会报错。

原因：

在if语句内部执行之后，age变量将立即被销毁

如果name为空，则永远都不会创建age变量

const声明

声明常量

必须初始化

不可更改

作用域限制在当前代码块

声明不会提升

禁止重声明（同一作用域不行，可以覆盖外部同名变量）

如果用const来声明对象，则对象中的值可以修改。

临时死区（Temporal Dead Zone）

JavaScript引擎在扫面代码发现声明变量时，遇到var则提升到作用域顶部，遇到let和const则放到TDZ中。当执行了变量声明语句后，TDZ中的变量才能正常访问。

循环中的块作用域绑定

我们经常使用for循环：

for(var i=0;i<10;i++){
  console.log(i); //0,1,2,3,4,5,6,7,8,9
}
console.log(i) //10

发现了什么？

在for循环执行后，我们仍然可以访问到变量i。

So easy ~ 把var换成let就解决了~

for(let i=0;i<10;i++){
  console.log(i); //0,1,2,3,4,5,6,7,8,9
}
console.log(i) //i is not defined

还记得当初讲闭包时setTimeout循环各一秒输出i的那个例子吗~

曾经熟悉的你 ~

for(var i=0;i<10;i++){
  setTimeout(function(){
    console.log(i); //10,10,10.....
  },1000)
}

很显然，上面的代码输出了10次的10，setTimeout在执行了循环之后才执行，此时i已经是10了~

之前，我们这样做 ~

for(var i=0;i<10;i++){
  setTimeout((function(i){
    console.log(i); //0,1,2,3,4,5,6,7,8,9
  })(i),1000)
}

现在，我们这样做 ~ 来看看把var改成let会怎样~

for(let i=0;i<10;i++){
  setTimeout(function(){
    console.log(i); //0,1,2,3,4,5,6,7,8,9
  },1000)
}

nice~

全局块作用域绑定

在全局作用域下声明的时

var会覆盖window对象中的属性

let和const会屏蔽，而不是覆盖，用window.还能访问到

欢迎来小白这逛逛~ 原文链接

GPU云服务器云服务器深入理解系列深入理解linux 深入理解webrtc 深入理解python

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84050.html

ES6学习之 -- let和const命令

摘要：命令用来声明变量，它的用法类似，但是命令声明的变量只在所在的代码块中有效。不允许重复声明不允许在同一作用域声明两个相同的变量。对于内部的数据结构的变化是无法控制的。 let命令用来声明变量，它的用法类似var，但是let命令声明的变量只在所在的代码块中有效。 { var a = 1; let b = 2; } console.log(a); // 1 con...

marser 2019-08-21 18:33 评论0 收藏0
深入理解ES6 (一) 块级绑定

摘要：声明声明的语法与的语法一致。总结文章都是以深入理解读书笔记形式，大部分引用书中的定义，加上作者的理解，样例也做了调整，所有样例都可以放到里运行亲自尝试。 1.变量提升使用 var 关键字声明的变量，无论其实际声明位置在何处，都会被视为声明于所在函数的顶部（如果声明不在任意函数内，则视为在全局作用域的顶部）。这句话从字面上不难理解。但是他是怎样一个过程，为什么会这样。当你代...

KunMinX 2019-08-26 10:27 评论0 收藏0
深入理解ES6笔记（一）块级作用域绑定

摘要：和都能够声明块级作用域，用法和是类似的，的特点是不会变量提升，而是被锁在当前块中。声明常量，一旦声明，不可更改，而且常量必须初始化赋值。临时死区临时死区的意思是在当前作用域的块内，在声明变量前的区域叫做临时死区。主要知识点有：var变量提升、let声明、const声明、let和const的比较、块级绑定的应用场景showImg(https://segmentfault.com/img...

马忠志 2019-08-23 10:58 评论0 收藏0
深入理解ES6之《块级作用域绑定》

摘要：众所周知，中的声明存在变量提升机制，因此引用了块级作用域来强化对变量生命周期的控制声明不会被提升，有几个需要注意的点不能被重复声明假设作用域中已经存在某个标识符无论该标识符是通过声明还是变量声明，此时再使用或关键定声明会抛错此处则会抛出错误众所周知，js中的var声明存在变量提升机制，因此ESMAScript 6引用了块级作用域来强化对变量生命周期的控制let const 声明不会被...

Nosee 2019-08-21 12:02 评论0 收藏0