12.24 ES6浅谈--块级作用域,let

第一部分:ES6新增了块级作用域,let关键字用于声明变量,相较于var而言,let关键字不存在声明提前。

1.ES6真正的出现了块级作用域,使用双花括号括住并在其中用let声明变量,会存在暂时性死区,在作用域外面使用变量会报错。

2.在循环中,如for循环,let命令相较于var命令会更好,原因在于所声明的变量不会提前到全局。那么在循环结束以后再调用该变量将无法访问。

3.如果是使用var的for循环,如

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

这里后面调用的a[6](),实际上是在调用全局里的i,另外a[i] = 匿名函数,只有当函数被调用时才执行,那么在循环结束后,a[6]()执行,这时候的i只有全局的那个i,也就是10。而如果将var换成了let,结果将会变成6,原因是let声明的每一个i都不提升,所有的i独立在调用函数的时候i实质就是当前循环的i,而i的改变是通过js引擎对上一轮i的记录而修改。

4.使用let声明变量时,for循环中循环条件是父级作用域,循环体是子作用域,两者单独分开,即可以let两个同名变量而不互相影响。

5.暂时性死区:变量使用let声明之后,在块级作用域中声明之前使用将会报错。另外let不允许重复声明变量。还有如let x = x也会报错,因为这里是将x的值赋给x,在未定义x之前就要取得x的值也是暂时性死区,不可取。

6.块级作用域的目的是为了防止变量提升,例如不执行的if语句,会因为变量提升导致内部的值覆盖外部变成Undefined,亦或者执行完之后的for循环的i仍然可以在外部访问。

7.块级作用域允许多层嵌套,内外层变量允许同名,块级作用域可以替代匿名函数的自调用。

8.函数声明式也存在声明提前,所以在ES5中,if条件中声明函数会被提前到当前作用域顶部。在ES6中,为了防止改变导致出现大的问题,所以ES6选择了将函数声明像以var的形式提升,即声明一个函数,其实是var了一个f = undefined。所以应该尽力避免在块级作用域中声明函数,如果要声明请选择函数表达式,f = 匿名函数。

9.let声明变量和声明函数表达式必须带大括号。

今天大概就这样了。




原文地址:https://www.cnblogs.com/harrywu96/p/12092713.html

时间: 2024-08-10 16:49:49

12.24 ES6浅谈--块级作用域,let的相关文章

浅谈块级作用域

在ES5里面其实是没有块级作用域,这个说法的,但是也有特殊,从ES3开始的try.catch中是有块级作用域的. 例: 1 try { 2 throw undefined; 3 } catch(a) { 4 a = 2; 5 console.log(a); 6 } 7 console.log(a); 同样,这个写法是目前使用代码转换工具来ES6代码处理,生成兼容ES5的代码.

es6中添加块级作用域的目的

原本只有函数作用域和全局作用域两种,这就导致出现很多不方便的地方: 1)for循环问题:在看js高程的时候,纠结在第七章好久,就是一个这样的实例 function createFunctions(){ var result = new Array(); for (var i = 0 ; i < 10 ; i ++){ result[i] = function (){ return i; } } return result; } 不管这段代码输出result[i]()中的i是几,结果都是10,这就

浅谈块级元素的水平格式化细节

内边距不能为负值,而外边距可以为负(测试极限)无极限,设置为负的内边距都会默认改为0 盒子的width值并不会随着增加的padding margin而改变,它并不是可见的值,往往在内容区左右添加边距,会隐式的增加width值. 水平格式化的七个属性:margin-left.border-left.width.border-right.margin-right,这些属性的值加起来正好是包含块也就是父盒子的width,所谓元素框与父元素的width相同. width.margin-left.marg

浅谈块级元素和内联元素的嵌套规则

块级元素的特点:每一个块级元素都是从一个新行开始显示,其后的元素需另起一行 常见: 块级元素:h1,h2,h3,h4,h5,h6,hr,div,fielset,form,dl,address,ol,p,table,ul,pre等 内联元素:a,b,br,em,i,img,input,strong,textarea,span,label等 注意:两者可相互转换:display:inline|block 嵌套规则: 1.块级元素里可包含内联元素和某些块级元素,但内联元素不能包含块级元素,只能包含其他

let和ES6块级作用域

es6中的块级作用域 之前在看360的培训课程时,知道了{...}是个块级作用域,错误的认为{...}中声明的函数变量都不会被外界访问到,在看了你不知道的JS之后,发现并不是这样的.在块级作用域中使用let声明的变量外界无法访问到. eg: var foo = true; if (foo) { let bar = foo * 2; bar = something( bar ); console.log( bar ); } c onsole.log( bar ); // ReferenceErro

ES6——块级作用域

前面的话 过去,javascript缺乏块级作用域,var声明时的声明提升.属性变量等行为让人困惑.ES6的新语法可以帮助我们更好地控制作用域.本文将详细介绍ES6新引入的块级作用域绑定机制.let和const声明机制及最佳实践 var声明 [变量提升] var声明会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined function getValue(condition){ if(condition){ var value = 'blue'; return value; }

ES6里关于作用域的拓展:块级作用域

过去,javascript缺乏块级作用域,var声明时的声明提升.属性变量等行为让人困惑.ES6的新语法可以帮助我们更好地控制作用域. 一.var声明 1.变量提升:var声明会发生"变量提升"现象,即变量可以在声明之前使用,值为undefined function getValue(condition){ if(condition){ var value = 'blue'; return value; }else{ //此处可访问变量value,值为undefined return

面试时面试官想要听到什么答案 关于es6中let、const、promise、块级作用域的问题

前言 前面写了一篇关于vue方面问题的面试题(面试时面试官想要听到什么答案(关于一些vue的问题)),感谢大家的阅读和意见,今天整理了一下我面试时经常会问到的一些关于es的问题,写了这篇文章,感谢拨冗翻阅拙作,敬请斧正.因为最近比较忙es6的问题就写了这些,写的比较水了,这些也是我比较常问的还有一些比较碎的内容面试问了但本文未体现只挑选了重点的,class和symbol也是两个重点,因为我了解不深所以就没有去问这两个 - -下面进入正文,本文会列举一些平时面试时问到的问题和答案,并说明我在当时问

bala001 浏览器中的JavaScript执行机制:09 | 块级作用域:var缺陷以及为什么要引入let和const?

前言:该篇说明:|请见 说明 —— 浏览器工作原理与实践 目录 在前面<07 | 变量提升:JavaScript 代码是按照顺序执行的吗?>这篇文章中,我们已经讲解了 JavaScript 中变量提升的相关内容,正是由于 JavaScript 存在变量提升这种特性,从而导致了很多于直觉不符的代码,这也是 JavaScript 的一个重要设计缺陷. 虽然 ECMAScript6(以下简称 ES6 )已经通过引入块级作用域并配合 let.const 关键字,来避开了这种设计缺陷,但是由于 Java