首页 > web前端 > js教程 > 正文

ES6中var、let、const、块级作用域以及暂存死区的介绍

不言
发布: 2018-11-14 15:29:41
转载
2670 人浏览过

本篇文章给大家带来的内容是关于ES6中var、let、const、块级作用域以及暂存死区的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

var

语法

var varname1 [= value1 [, varname2 [, varname3 ... [, varnameN]]]];
登录后复制

使用

var a, b=2 // 声明多个变量,可以赋值,也可以不赋值
a=1 // 先声明,再赋值
登录后复制

var变量提升

使用var声明的变量将会被提升到函数的顶部

console.log(a) // undefined
var a =2  
console.log(a) // 2
console.log(b) //Uncaught ReferenceError: b is not defined...
登录后复制

以上代码相当于

var a
console.log(a) // undefined
a=2
console.log(a) // 2
console.log(b) //Uncaught ReferenceError: b is not defined...
登录后复制

0x002 let

语法

let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];
登录后复制

使用

let a, b = 2 // 声明多个变量,赋值不赋值无所谓
a = 2 // 声明之后再赋值
登录后复制

不再提升

console.log(a) // Uncaught ReferenceError: a is not defined...
let a=1
登录后复制

注意:猜测, 使用babel翻译一下代码发现,只是let变成了var,所以使用babel转义之后的代码依旧会提升

不能重复声明

let a=1
let a=2 // Uncaught SyntaxError: Identifier 'a' has already been declared
登录后复制

 const

语言

const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]];
登录后复制

使用

const a=1, b=2 // 不能省略的值
登录后复制

不能省略的值

const c // Uncaught SyntaxError: Missing initializer in const declaration
登录后复制

不能重复赋值

const d=4
d=5 // Uncaught TypeError: Assignment to constant variable.
登录后复制

可以修改的引用

const e=[]
e[0]=0
console.log(e) //[0]
登录后复制

 块级作用域

块级作用域是随着let、const而来最有用的特性了,在之前的js中,js的作用域是函数级的,由此带来的几个臭名昭著的问题:

意外被修改的值

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // 同样的变量!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}
登录后复制

可以使用let避免了

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // 不同的变量
    console.log(x);  // 2
  }
  console.log(x);  // 1
}
登录后复制

万恶的for循环和点击事件

var list = document.getElementById("list");

for (var i = 0; i < 5; i++) {
  var item = document.createElement("LI");
  item.appendChild(document.createTextNode("Item " + i));

  item.onclick = function (ev) {
    console.log("Item " +i + " is clicked.");
  };
  list.appendChild(item);
}
console.log(i) // 5
登录后复制

如果点击上面,不管点击哪个,显示出来的都是Item 5 is clicked.,虽然可以使用闭包解决,但是现在有了更好的方案

let list = document.getElementById("list");

for (let i = 0; i < 5; i++) {
  let item = document.createElement("LI");
  item.appendChild(document.createTextNode("Item " + i));

  item.onclick = function (ev) {
    console.log("Item " +i + " is clicked.");
  };
  list.appendChild(item);
}
登录后复制

作用域规则很简单

{}块内形成一个作用域,包括ifelsewhileclassdo...while{}function

{
    const f=6
}
console.log(f) // Uncaught ReferenceError: f is not defined
登录后复制

for循环中用let声明一个初始因子,该因子在每个循环内都是一个新的作用域

for (let i = 0; i < 10; i++) {
  console.log(i);
}
console.log(i) // Uncaught ReferenceError: i is not defined
登录后复制

switch只有一个作用域

switch (x) {
  case 0:
    let foo;
    break;
    
  case 1:
    let foo; 
    break;
}
// Uncaught SyntaxError: Identifier 'foo' has already been declared
登录后复制

暂存死区-Temporal Dead Zone-TDZ

随着let和const的引入,也引入了暂存死区的概念。使用var的时候,作用域内(函数作用域),在还没使用var声明一个变量的时候,访问该变量,将会获得undefined。但是如果使用let,作用域(块级作用域)内,在还没使用let声明一个变量的时候,访问该变量,将会获得ReferenceError,从作用域开始到let语句之间,就是暂存死区。

{
 console.log(a) // Uncaught ReferenceError: a is not defined
 console.log(b) // Uncaught ReferenceError: b is not defined
 console.log(c) // undefined
 // 暂存死区
 let a =1
 const b=2
 var c=3
}
登录后复制

注意:猜测, 使用babel翻译一下代码发现,只是let变成了var,所以使用babel转义之后可能不存在暂存死区

以上是ES6中var、let、const、块级作用域以及暂存死区的介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:segmentfault.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板