ES6中的let(3)
2018-03-11 16:52
78 查看
4、ES6语法创建变量(let)存在块级作用域,ES5语法创建变量(var/function)没有块级作用域
[ES5]
window全局作用域
函数执行形成的私有作用域
[ES6]
除了有ES5中的两个作用域 ES6中新增加了块级作用域 (我们可以把块级作用域理解为之前学习的私有作用域:存在私有变量和作用域链的一些机制)
大部分我们遇到的大括号都是块级作用域
块级作用域的增加有什么用?
[ES5]
window全局作用域
函数执行形成的私有作用域
[ES6]
除了有ES5中的两个作用域 ES6中新增加了块级作用域 (我们可以把块级作用域理解为之前学习的私有作用域:存在私有变量和作用域链的一些机制)
ES6中把大部分用大括号抱起来的都称之为块级作用域
let num = 12, str = ''; let fn = function (str) { str = 'HELLO'; // console.log(arguments[0]);//'HELLO' 当前JS并没有开启严格模式,所以形参变量和arg存在映射机制(但是我们以后尽量不要这样处理:因为把ES6编译成es5之后,会默认开启严格模式,映射机制会中断,此处的值依然是'xx',这样会导致ES6与ES5结果不一致) //console.log(num);//Uncaught ReferenceError:num is not defined let num = 13; console.log(num,str);//13 'HELLO' } fn('xx'); console.log(num,str);// 12 ''
大部分我们遇到的大括号都是块级作用域
// // if (10>= 10){ // var total = 100; // } // console.log(total);// 100 // if (10>= 10){ // let total = 100; // } // console.log(total);// Uncaught ReferenceError: total is not defined 判断体也是一个块级私有作用域,在这个作用域中声明的变量是私有变量,在块级作用域之外是无法使用的 // for (var i = 0;i <5; i++){ // console.log(i); // 0 1 2 3 4 // } // console.log(i);// 5 for (let i = 0;i <5; i++){ console.log(i); // 0 1 2 3 4 } console.log(i);// Uncaught ReferenceError: i is not defined 循环体也是一个块级作用域(每一次循环都会形成一个新的块级作用域:当前形成5个块级作用域 每一个块级作用域当中都有一个私有变量i,分别存储了0-4) { let i = 12; } console.log(i);//Uncaught ReferenceError: i is not defined 这是ES6中标准的块级作用域 // let a = 10; // { // let a = 20; // { // { // console.log(a);//20 // } // } // } // let a = 10; // { // let a = 20; // { // { // console.log(a);//报错 虽然ES6没有变量提升,但是每一次进入当前作用域都会把let定义的变量都会找一遍(不提升但是找了,找到了说明当前作用域中是有这个变量的,提前用都会报错 ) // } // let a = 30; // } // } try{ let b = 100; }catch(e){ let c = 200; } console.log(c); // c is noat defined console.log(b);// b is not defined //try catch 中任何一个大括号都是块级作用域 switch (10){ case 10: let d = 20; break; } console.log(d);// d is not defined let obj = {name:'xxx'}; for (var key in obj) { } console.log(key);// key is not defined
块级作用域的增加有什么用?
let tempList = document.getElementsByName('temp'); // for (var i = 0; i < 5; i++) { // tempList[i].onclick = function () { // console.log(i);// 5 怎么点击都是5 异步操作以及作用域链的查找,找到全都是全局作用域下的5 // } // // } //->自定义属性解决 定义一个属性index // for (var i = 0; i < tempList.length; i++) { // tempList[i].index = i ; // tempList[i].onclick = function () { // console.log(this.index); // } // // } //->闭包解决 每一次循环都形成一个私有作用域 // for (var i = 0; i < tempList.length; i++) { // ~function (i) { // tempList[i].onclick = function () { // console.log(i); // } // }(i); // } //=> es6 let 解决 for (let i = 0; i < tempList.length; i++) { tempList[i].onclick = function () { console.log(i); } }
相关文章推荐
- js -- ES6(二)-- let 和 const 命令(根据阮一峰ES6标准入门整理)
- ES6基础语法(一)—— let和const
- ES6---let和const异同
- ES6学习之——let、const
- 【ES6】let 命令
- 1、 ES6语法let、const
- ES6 中的let、const与var的区别
- 详解ES6中的let命令
- es6 箭頭函數 let, const
- ES6学习记录-let和var的区别
- es6新语法:let、const
- let和const命令 — 学习ES6(一)
- es6中let,const区别与其用法
- ECMAScript 2015(ES6):let和const命令
- ES6知识整理(一)--- let/const/箭头函数
- ES6 之 let和const命令 Symbol Promise对象
- ES6中的let、contst
- es6之let和const
- ES6-个人学习笔记一--let和const
- ES6——let