纵有疾风起
人生不言弃

var、const和let的作用和区别

\color{red}{变量提升}

很多人认为,var是存在变量提升了,因此,如果你有如下代码:

var foo = 123;

程序不会报错,而是打印出undefined。这是因为,编译器预编译的时候,第一步只会记录变量和函数的定义,第二步才会执行程序(hoisting是对一种现象的描述,而不是一种编译器具体的行为),所以程序看起来等价于下面的代码:

var foo;console.log(foo);      // undefinedfoo = 123;

再来看let是否存在变量提升:

console.log(foo);      let foo = 123;//输出结果: Uncaught ReferenceError: Cannot access 'foo' before initialization

发生了引用错误,但是这是因为let定义的变量不存在提升导致的么?

console.log(foo);      //输出结果:  Uncaught ReferenceError: foo is not defined//错误原因:foo没有定义。

如果说let foo不存在变量提升,那么再运行

console.log(foo);     let foo = 123;

也应该报出foo没有定义这个错误的,但是错误确是因为foo没有被初始化。

下面是揭示真相的时刻了:

let和const定义的变量都会被提升,但是不会被初始化,不能被引用,不会像var定义的变量那样,初始值为undefined。因此,在使用console.log(foo)的时候会发生引用错误。

为什么let和const定义的变量不会被初始化呢?主要是因为const。const,顾名思义:常量,const的引用不应被改变。如果编译器把const初始化为undefined,之后,又让它等于我们定义的那个值,就改变了const的引用。因此,委员会决定let和const虽然也会发生变量提升,但是没有任何初始值。

总结,理解变量提升机制

\color{red}{块级作用域}

var、let和const另外一个重要区别就是let和const只在块级作用域中有效,比如:

{    var a = 'Smiley';}console.log(a)      // 输出结果:Smiley

但是:

{    let a = 'Smiley';}console.log(a)      //  报错: Uncaught ReferenceError: a is not defined

\color{red}{循环中i的定义}

我们来看一个例子:

var result = new Array();for (var i=0; i<10; i++) {  result[i] = function() {    return i;  }}console.log(result[0]())       // 输出结果:10

之所以结果返回10,这是因为所有的i都使用同一个引用,而i最终会被更新为10,因此,result中所有函数都会返回10。
那么怎么修复呢?在ES6之前,最常见的修复方法是使用IIFE。但是let和const的发明让我们有了一种更简单的修复方法:
(也就是把var改为let)

var result = new Array();for (let i=0; i<10; i++) {  result[i] = function() {    return i;  }}console.log(result[0]());   // 输出结果:0

在每次循环当中,都会创建一个新的let i(因为let只在块级作用域有效,因此是不会报错的),因此result[i]使用的每个i都是不同的,值并不会像使用var的例子那样不断增加。

那么我不改变var呢?那就用立即执行函数

\color{red}{其他}

关于var和let还有一些微小的区别,比如:

暂时性死区(如果理解了JS的两步预编译,这个很容易理解)
在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称TDZ)。

 // TDZ开始  tmp = 'abc'; // ReferenceError  console.log(tmp); // ReferenceError  let tmp; // TDZ结束  console.log(tmp); // undefined  tmp = 123;  console.log(tmp); // 123

let和const不允许重复声明

let cc = 1;let cc = 123; // Uncaught SyntaxError: Identifier 'cc' has already been declared

let和const不会绑定全局作用域

let cc = 1;console.log(window.cc) // 不存在

let 和const 的区别

另外一点值得注意的是,let和const之间的区别。

大家一般认为const是常量,不能被更改。但是请看下面这段代码:

const obj = {    a: 12}obj.a = 1; // 运行正常

我们更改了obj这个const的a这个属性,但是没有任何报错。不是说const定义的变量不能被更改么?其实是const定义的变量的引用不能被更改,在上面的程序中,如果你说obj = ‘abc’,程序是会报错的。但是上面例子中,引用其实是一个指针,即使指针指向的东西改变了,但只要指针没有改变,就不会报错的。所以,建议只使用const定义简单类型的数据,定义对象还是使用let会不容易产生歧义。

文章转载于:https://www.jianshu.com/p/363494ce9f38

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » var、const和let的作用和区别

分享到: 生成海报
avatar

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活