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

本篇文章给大家带来的内容是关于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);

}

作用域规则很简单

{}块内形成一个作用域，包括if、else、while、class、do...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转义之后可能不存在暂存死区