let和var的小结

phoenixsky 发布于2019-08-26 11:33 / 1059人阅读

摘要：与关键字不同的是，它声明的变量只能是全局或者整个函数块的。块的已经生明，并未初始化，它仍处在暂存死区小结当在块中使用时，将变量的作用域限制为该块。注意的作用域在它被声明的函数内的区别。

let允许你声明一个作用域被限制在块级中的变量、语句或者表达式。与var关键字不同的是，它声明的变量只能是全局或者整个函数块的。

一作用域

let声明的变量只能在其声明的块或子块中使用，这个和var很相似，二者之间最主要的区别在于var声明的变量的作用域是整个封闭函数。

// var
function testVar() {
  var a = 0;
  if (true) {
    var a = 1;
    console.log(a);  // 输出1
  }
  console.log(a);  // 输出1
}

// let
function testLet() {
  let a = 0;
  if (true) {
    let a = 1;
    console.log(a);  // 输出1 （不同的变量）
  }
  console.log(a);  // 输出0
}

小结

在testVar函数里面重复输出了1，var声明的变量的作用域是整个封闭函数，所以到if里面被赋值为1，最后都输出为1。

在testLet函数里面{}，两个花括号相当于一个作用域，两个a在不同的作用域里面，所以不受影响。（使用let可以完全代替闭包）

二简化内部函数代码

比如给许多函数添加事件

/*
*  使用let
*/

let lists = document.getElementsByTagName("li");
for (let i = 0; i < lists.length; i++) {
  lists[i].onclick = function(ev) {
    console.log(`点击了第${i}个元素`);
  }
}
console.log(i);  // 报错 Uncaught ReferenceError: i is not defined

运行这段代码点击每个元素都能输出正确的i值，而且console报错

var lists = document.getElementsByTagName("li");
for (var i = 0; i < lists.length; i++) {
  lists[i].onclick = function(ev) {
    console.log("点击了第"+i+"个元素"); // 点击了第6个元素
  }
}
console.log(i);  // 输出6


// 解决办法，可以使用自执行函数
var lists = document.getElementsByTagName("li");
for (var i = 0; i < lists.length; i++) {
  (function(i){
    lists[i].onclick = function(ev) {
      console.log("点击了第"+i+"个元素"); // 正常输出
    }
  })(i);
}
console.log(i);  // 输出6

上面的代码可以看出无论点击哪个元素都是输出“点击了第6个元素”，而且最后console也是6。

小结

因为（匿名）内部函数的五个实例引用了变量i的五个不同实例。注意，如果你将let替换为var，则它将无法正常工作，因为所有内部函数都将返回相同的i：6的最终值。此外，我们可以通过将创建新元素的代码移动到每个循环的作用域来保持循环更清晰。

三暂存死区的错误

不能再相同函数和相同作用域里面重新声明同一个变量

{
  let a;
  let a; //Uncaught SyntaxError: Identifier "a" has already been declared
}

let 绑定不受变量提升的约束，也就是let声明不会被提升到当前执行上下文的顶部，如果你在初始化之前引用它，也会报上面那个错误。

{
  console.log(a);  // Uncaught ReferenceError: a is not defined
  let a;
  let b;
}

上面介绍了es6作用域的问题，表达式(2 + 55)内的标识符“a”会解析为if块的a,而不是覆盖值为2的a。if块的a已经生明，并未初始化，它仍处在暂存死区

function test(){
 var a = 2;
 if (true) {
    let a = (a + 55); // ReferenceError
  }
}
test();

小结

当在块中使用时，let将变量的作用域限制为该块。注意var的作用域在它被声明的函数内的区别。

总结

let有块级作用域；

没有变量提升；

暂存死区的错误；

不能重复声明；

do表达式。

--- 参考阮老师的《ECMAScript 6 入门》

服务器托管 idc机房托管 linux的var Lets Let js 中 let

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

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

ES6部分特性小结

摘要：但是或者，会将声明关进一个小黑屋也是暂时性死区，只有执行到变量声明这句语句时，变量才会从小黑屋被放出来，才能安全使用这个变量。前言踩着前人的肩膀，努力前行。参考了很多前人的文章。 1.变量声明const和let es6之前声明变量只能用var，var的特点是无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部) function test(){ i...

pinecone 2019-08-23 11:26 评论0 收藏0
Js 面向对象小结

摘要：碰过的一个有趣的问题实现一个构造函数，有一个属性，每次调用该值加。共有方法看下面的代码可以发现，被重复创建了如果不想方法或者属性在每次时新创建一份，可以将其设置在构造函数的原型上。面向对象有三个特点，一个个来说：封装私有变量利用闭包实现对象的私有变量。 function Animal (age) { this.getAge = function () { retu...

SQC 2019-08-22 18:28 评论0 收藏0
前端crypto-js解密报malformed utf-8 data小结

摘要：一般情况下，很少会在前端进行加解密的操作，因为没有太大的必要性，前端的代码是很容易看到的，即使这样，我觉得还是有比较处理一下的，至少不让别人一眼就看到信息我使用存储了一些用户的用户名昵称等的信息，通过进行加解密处理，这里我选用了加密算法对一般情况下，很少会在前端进行加解密的操作，因为没有太大的必要性，前端的代码是很容易看到的，即使这样，我觉得还是有比较处理一下的，至少不让别人一眼就看...

codergarden 2019-08-23 14:21 评论0 收藏0
map与forEach的小结

摘要：方法功能创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。。方法功能遍历，对数组中的元素依次处理。 Array.map()方法功能 : 创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。。参数 : （currentValue，index，arrOrigin）(当前元素的值，当前元素的索引，当前元素的数组对象)使用 : var...

tomato 2019-08-23 18:34 评论0 收藏0
JS 作用域 var与let 区别

摘要：在入门时，最让人傻傻分不清楚的就是与带来的作用域的苦恼。明确循环内部的与中的是在不同的作用域中，它们有各自单独的作用域。局部使用定义时只在该函数作用域内部有效。在es6入门时，最让人傻傻分不清楚的就是var与let带来的作用域的苦恼。最近又一次翻看阮一峰老师的文章，重新有了自己的小结。代码分析 var a = []; for (var i = 0; i < 10; i++) { ...

antyiwei 2019-08-21 18:30 评论0 收藏0