ES6中let、const命令与var那些事儿(一）

人生如逆旅，你我亦行人。

原创不易，转载请注明出处链接

目录
重复声明
变量提升
暂时性死区
window对象的属性和方法

ES6新增的let命令用于声明变量，const命令用于声明常量

1，重复声明

已经存在的变量或常量，又声明了一遍。
$var$允许重复声明，$let$、$const$不允许重复声明。

var a = 1;var a = 2;console.log(a);//2

let b = 1;let b = 2;   console.log(b);  //报错//const与let类似//const a = 1;//const a = 2;//console.log(a);//报错

function func(arg) {let arg = 2;}func();//报错//因为已经有arg变量名的形参了

2，变量提升

$var$命令声明的变量会发生变量提升的现象，也就是说若变量在$var$声明之前使用的话，它的值为undefined，有趣是function声明的函数也有类似这样的特性。而$let$、$const$命令声明的变量不存在变量提升，若在声明之前使用，会直接报错。
var命令声明的变量会发生变量提升：
var命令会提升变量的声明到当前作用域的顶部：

console.log(a);//undefinedvar a = 2;//上段代码等价于var a ;console.log(a);//undefineda  = 1;

我们易想到再次输出a：

console.log(a);//undefinedvar a = 2;console.log(a);// 2

来看函数声明提升：
函数声明会进行函数提升，而函数表达式是不会进行函数提升的。
a，函数声明

console.log(func());//1function func(){var i = 1;return i;}

上段代码等价于：

function func{var i = 1;return i;}console.log(func());//1

即func函数跑到了console.log前面。

b，函数表达式：

console.log(func());//报错：Uncaught ReferenceError:  func is not a functionvar func = function(){var i = 1;return i;}

上段代码等价于：

var func;console.log(func());var func = function(){var i = 1;return i;}

函数表达式只提升函数名。
拓展：
c，当同时遇到函数声明和函数表达式时，会优先进行函数声明：

console.log(func());//2var func = function() {var a = 1;return a;}function func() {var b = 2;return b;}

上面代码在运行时执行结果为2，由此可见：当同时遇到函数声明和函数表达式时，会优先进行函数声明。

let和const命令不存在变量提升：

console.log(b);let b = 1;  //报错，不存在变量提升

3，暂时性死区（temporal dead zone，简称TDZ）

只要块级作用域内存在$let$、$const$命令，它们所声明的变量或常量就会自动’绑定’这个区域，不再受外部作用于的影响。

let a = 1;function func(){    console.log(a);//报错    let a = 3;//分析：函数作用域内存在let、const，变量a//不受外部a=2作用域影响，并且不存在变量提升，故会报错}func(); 

即在块级作用域内，使用$let$、$const$命令声明变量之前，该变量都是不可用的。这就是暂时性死区。
再看一个小例：

let n = 3;function func(){console.log(n);//函数作用域内不存在let、const，变量b向外层作用域寻找}func()//3

养成习惯，对于所有的变量或常量，做到先声明，后使用。

4，window对象的属性和方法

全局作用域中，var声明的变量或通过function声明的函数，会自动变成window对象的属性或方法$let$、$const$不会。

var/functionvar name = '小张;var func =function(){}console.log(window.name);   //小张console.log(window.func === func); 

写在结尾：能看到此处是我莫大荣幸，希望对你有所帮助。
您的点赞👍关注支持，是我创作动力，文中不足之处还请纰漏。

一些参考：阮一峰 ECMAScript 6 (ES6) 标准入门教程