你的位置:首页 > Java教程

[Java教程]ES6之let命令详解


let与块级作用域 

{  
  var foo='foo'; let bar='bar';}console.log(foo,'var'); //foo var
console.log(bar ,'bar');//Uncaught ReferenceError: bar is not defined

在代码中,使用var申明的变量在代码块外面能被识别,但是let命令却不能被识别,这样就实现了js的块级作用域,我们在使用条件语句 循环语句等就会不担心变量污染的问题了,以下是两种写法等对比:

es6:

for (let i = 0; i < a.length; i++) {  let x = a[i]  …}for (let i = 0; i < b.length; i++) {  let y = b[i]  …}let callbacks = []for (let i = 0; i <= 2; i++) {  callbacks[i] = function () { return i * 2 }}callbacks[0]() === 0callbacks[1]() === 2callbacks[2]() === 4

es5:

var i, x, y;for (i = 0; i < a.length; i++) {  x = a[i];  …}for (i = 0; i < b.length; i++) {  y = b[i];  …}var callbacks = [];for (var i = 0; i <= 2; i++) {  (function (i) {    callbacks[i] = function() { return i * 2; };  })(i);}callbacks[0]() === 0;callbacks[1]() === 2;callbacks[2]() === 4;

在{}用let声明的变量只有在{}内是有效的   

let不会有变量提升

熟悉js开发的都知道函数有两种声明方式

 

a(); // 'a'b(); // 报错不是一个函数 其实是undefined
function a(){  console.log('a');}var b=function(){  console.log('b');}

 

这两种方式js解析顺序是不一样的, 首先函数a会被js加载然后执行  var b ;至于b是什么数据会等第二批执行,也就是正常按照从上到下执行代码,在执行b()的时候还是未初始化的状态但是并没有报错因为var已经被优先执行了 这种就是变量提升,此时我们修改下代码

 a(); // 'a' b(); // b is not defined function a(){  console.log('a');  } let b=function(){  console.log('b'); }

虽然仍是报错但是明显提示不存在b变量了,所以使用了let之后就不会优先执行了也会回归“第二批”执行的队伍中,function a(){} 依然是“第一批”优先执行的代码。

 

变量绑定和不可重新定义

js是存在作用域链的,在特定作用域下只能获取同级或者高层级的变量;但是let存在变量绑定行为,不遵循作用域链;

   let a=1;   (function (){    a=2; //a is not defined    let a;    console.log(a);   }());  let a=1;    (function (){    a=2;     console.log(a); //2  }());

我们可以这样理解,在当前执行的作用域内如果没有对变量定义 则会从高层级级获取,如果已经存在则封闭当前作用域不再考虑高层级是否声明了该变量;

在相同作用域内,let是不能重复声明同一个变量的;但是var则不在乎声明多少次,永远都是后者替换前者;

   var foo=123;   var foo=456;   console.log(foo);  //456   let bar=123;   let bar=456; //Identifier 'bar' has already been declared   console.log(bar);

有了块级作用域我们再也不用写匿名函数来进行作用域封闭了,以前你可能是这样写:

(function () {  var foo = function () { return 1; }  foo() === 1;  (function () {    var foo = function () { return 2; }    foo() === 2;  })();  foo() === 1;})();

但是现在不用这样麻烦了,你完全可以这样写: 

{  function foo () { return 1 }  foo() === 1  {    function foo () { return 2 }    foo() === 2  }  foo() === 1}

参考了了阮一峰的介绍 做了一些简化和自己的例子 欢迎补充~