javascript精雕细琢（一）：var let const function声明的区别

目录

引言

var

let

const

function

总结

引言

　　在学习javascript的过程中，变量是无时无刻不在使用的。那么相对应的，变量声明方法也如是。变量是由自己决定，但变量声明方法是早已经定义好的。那么在使用变量之前，了解变量声明方法，就变得尤为重要。在ES6推出之前，最常用的声明变量方法就是var。但是由于var自身的缺陷，ES6推出了let和const替代var。虽然修正了var的缺陷，但不能改变的，是之前已经用var写了多少年的项目，这些项目是无法随着var的被取代而轻易更改的。所以仍存在着使用var的公司和项目，这也使得了解var、let、const的区别变得有必要。

　　在接下来的说明中，为了理解起来一目了然，使用了图片说明的方式，搭配适当的文字解释，并没有粘贴代码（因为代码都及其简单）。我希望读完这篇文章后，能达到理解记忆的效果。

一、var

　　在说明var并看图之前，我们先统一思路，将变量的声明及使用过程分为：*****创建→初始化→赋值→修改*****四步。

　　

　　 首先，来看var的声明及使用：

　

　

　　由上图可以看出，var在它的执行环境中的声明及操作过程为：

　　　　（ 创建→初始化 ）→赋值→修改

　　　　1、隐藏步骤：在环境最顶端，创建变量，并初始化为undefined—— 变量提升；

　　　　2、为变量赋值；

　　　　3、对变量进行操作，可以在后续操作中对变量值进行修改；

　　通过console.log的打印结果，我们可以清晰的认识到一点——var的初始化与赋值是分离的，而且初始化的过程优先于执行环境中的所有操作。这就是为什么在var声明赋值前console.log变量，会打印出undefined，而不是报错的原因。

　　var声明的初始化先于赋值的现象，就叫做*****变量提升*****。

　　

　　下面再来看第二张图，说明var的另一个缺陷：

　　


　　由上图可以看出，var声明一个变量时，可以无限次的以同一个变量名不断的 创建→初始化→赋值，这跟直接修改变量值的结果是一样的。但是实际操作中不会有人通过这种方式对变量执行操作，而且这种设计缺陷着实让人无法忍受……。

二、let

　　上图：



　　同样，先分析过程：

　　　　（ 创建→初始化→赋值 ）→修改

　　　　1、不存在隐藏步骤；隐藏步骤在环境最顶端，创建变量，并初始化为undefined—— 变量提升；

　　　　2、创建变量、初始化并赋值；

　　　　3、对变量进行操作，可以在后续操作中对变量值进行修改；

　　通过上图，我们可以看出let声明变量时，（ 创建→初始化→赋值 ）是在一步完成的。不存在变量提升的现象。所以在let声明前console.log(a)，报错***a is not defined***，因为此时a还没有被创建。

　　

　　接下来再看第二张图



　　上图说明了let区别于var的另一个特性——变量的唯一性。同一个变量名，不能在let中重复使用，所以执行上图操作的结果，就是报错***Identifier 'a' has already been declared***；

三、const

　　再上图：

　　



　　分析过程：

　　　　（ 创建→初始化→赋值 ）→修改

　　　　1、不存在隐藏步骤；隐藏步骤在环境最顶端，创建变量，并初始化为undefined—— 变量提升；

　　　　2、创建变量、初始化并赋值。必须赋值，不赋值会报错；

　　　　3、对变量进行操作，可以在后续操作中对变量值进行修改，不可以对变量进行修改，但是可以对变量的属性进行修改；

　　为了说明const的特性，特意声明了一个对象。在理解了var和let的过程之后，再来看const的整个过程，会发现在（ 创建→初始化→赋值 ）的过程中，const和let是没有区别的。唯一的区别在于→修改。如果执行了图片中的代码，在***a = 1***那步会报错*** Assignment to constant variable***。其中的constant就是const的英文全拼，它的意思的***不变的、恒定的、恒量***。从字面上就能理解，通过const声明的变量，是一个恒定值，即无法更改的值。所以当通过***a = 1***试图修改a的值时，报错。

　　虽然a本身的值无法修改，但是a内的属性是可以修改的。从图上最后一步可以看出。a.name的值成功修改为"Jack"。这就是const 的第二个特性。

　　同let一样的，const的第三个特性也是变量的唯一性，不再过多阐述。

四、function

[b]　　继续上图：[/b]

[b]

[/b]

　　

　　分析过程：

　　　　（ 创建→初始化→赋值 ）→执行/修改

　　　　1、隐藏步骤；隐藏步骤在环境最顶端，创建函数，初始化并赋值为函数定义；

　　　　2、执行函数，无论函数在何位置，只要可用，就可以调用；

　　function是专门用于函数声明的方法，由于函数的复杂性，以及利用性。function声明的函数，会在整个环境变量最顶端完成创建、初始化、赋值三位一体的操作。这样一来，不管在何处声明了函数，可以在任何地方调用函数方法。这是比较合乎常理的性质。

　　function另外一个性质，同var一样，它也可以对同一变量重复声明，而且后边的函数定义会覆盖前边的函数定义，如下图所示：

　　


　　结果打印1，说明前边声明的函数方法被后边所覆盖。

五、总结

　　综上所述，可以总结为如下几点：

　　　　1、var与let、const的区别在于变量提升，以及变量的唯一性；

　　　　2、const与let的区别，除了变量值不能修改，其他性质一样；

　　　　3、function由于其自身的需要，创建→初始化→赋值 三位一体，在环境最顶端完成；也正因为这种性质，函数可以在任何位置被调用；

　　　　4、如果可以，尽量使用let、const代替var；

　　本文仅仅简单罗列了在函数声明及操作方面，var、let、const、function的区别，意在为初学者理清概念偏差，少走弯路，并通过理解学习，早日跨入JS门槛。至于在for循环以及其他一些地方上存在的区别，涉及实际使用。以后会单独再开一篇进行讲解。

　　以上，如有错误或是纰漏，欢迎批评指正~