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的声明及使用：

function test() {
　　/*
   　　预解析，初始化与赋值分离
       var a = undefined // 创建变量a，并初始化为undefined。此时变量已经存在与环境中
   */
        　　
   console.log(a) //undefined

   var a = 0; //赋值为0
   console.log(a); // 0

   a = 1; //可以修改变量值
   console.log(a) // 1
}

test();

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

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

  1. 预解析：在环境最顶端，创建变量，并初始化为undefined—— 变量提升；
  2. 为变量赋值；
  3. 对变量进行操作，可以在后续操作中对变量值进行修改；

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

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

然后着重说一下变量提升

  1. if判断中的变量提升
function test() {
　　/*
   　　预解析
      虽然if判断没有执行，但var的变量提升已经发生，此时执行环境中，已经存在变量a，值为undefined；
   */
        　　
   console.log(a) // undefined，变量提升
        　　
   if (false) {
   　　var a = 1;
       console.log(a) //不执行
   }

   console.log(a); //undefined，变量未赋值

   a = 1; //注意，此时因为a的变量提升，未加声明符号的赋值，并没有提升到全局环境中
   console.log(a); // 1
}

test();

console.log(a); // 报错，因为if中a的变量提升，a = 1的赋值并没有存在与全局中。如果注释掉if判断中的内容，a = 1因为没加变量声明符号，相当于在与全局中声明，那么最后的console.log(a)将打印1

2.for循环中的变量提升

function test() {
　　/*
   　　预解析
      虽然if判断没有执行，但var的变量提升已经发生，此时执行环境中，已经存在变量a，值为undefined；
   */
        　　　
   console.log(a) // undefined，变量提升
        　　
   console.log(i); //undefined，变量提升
   for (var i = 0;i < 0;i++) {
   　　var a = 1;
      console.log(a) //未执行
   }
   console.log(i); //1，for中的初始化语句已经执行

   console.log(a); //undefined，变量未赋值

   a = 1;
   console.log(a);
}

test();
console.log(a); //报错，变量不存在

从上边代码中可以看出，当var声明存在于if和for循环中时，不管赋值有没有执行，创建及初始化的过程都已经提升到了执行环境中。

最后说明var的一个缺陷：

function test() {
　 var a = 0;
   var a = 1;
   var a = 2;

   console.log(a); // 2
}

test();

由以上代码可以看出，var声明一个变量后，可以无限次的以同一个变量名不断的重复 创建→初始化→赋值，这跟直接修改变量值的结果是一样的。但是实际操作中不会有人通过这种方式操作变量，而且如果项目很大，很难保证不出现给不同变量声明同一个变量名的情况，很容易出现错误。

二、let

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

function test() {
    /*
        预解析，没有变量提升，啥也没有。创建、初始化与赋值同时进行
    */

　  console.log(a); //报错，变量仍未创建

    let a = 0; // 创建变量a，初始化并赋值为0.不赋值的话，则为undefined;
    console.log(a); // 0

    a = 2; // 可以修改变量值
    console.log(a); // 2
}

test();

同样，先分析过程：

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

  1. 预解析，啥也没有；在环境最顶端，创建变量，并初始化为undefined—— 变量提升；
  2. 创建变量、初始化并赋值；
  3. 对变量进行操作，可以在后续操作中对变量值进行修改；

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

然后，来看let在重复声明时的表现：

function test() {
　 let a = 1;
   let a = 2;
   let a = 3;

   console.log(a); // 报错
}

test();

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

最后，let与var最大的区别——块级作用域

首先说明，块级作用域的概念——简单理解，{}一个大括号就是一个代码块，一个单独的执行环境。那么它理应不受外部影响（如果不是刻意为之的话，它也不应该影响外部环境）。

但是在let之前，JS中的变量声明是没有块级作用域的属性的。这其中最典型的案例，就是for循环中的var声明i。

function a() {
　　for (var i = 1;i < 5;i++) {
   　　console.log(i);
       for( var i = 10;i < 20;i++) {
       　　console.log(i);
       }
   }
}
a(); //只执行外部循环一次，因为内部循环由于var声明的缘故，执行过后i值已经为11，外部循环判断后，将不再执行

function testA() {
　　/*
   　 预解析
      创建i并赋值为undefined
      注意，此时实际上是两个i的变量提升
   */
   console.log(i); // undefined

   var i = 0; // 赋值i = 0
   console.log(i); // 0;

　 {
   　　console.log(i); // 0，访问第一个i
       var i = 10 // 赋值i = 10，覆盖第一个i
       console.log(i); // 10，访问第二个i
   }

   console.log(i); // 10，访问第二个i，i已经被覆盖
}
testA();

以上代码，通过testA函数，侧面解释了一下a函数中的行为原因。这一行为模式，充分暴露了var声明的缺陷。

然后再来看let声明中的块级作用域：

function b() {
　　for (let i = 0;i < 5;i++) {
   　　console.log(i);
      for(let i = 10;i < 20;i++) {
      　　console.log(i);
      }
   }
}
b(); //因为块级作用域的存在，两个循环的i互不影响，所有循环次数都会被执行。实际使用时，建议还是不要都用同一变量名

function testB() { 　　
  /*预解析啥也没有 */
  console.log(i); // 报错，暂存死区  

  let i = 0;
  // 赋值i = 0
  console.log(i); // 0;  

  {
    console.log(i); // 报错，暂存死区，因为块中又声明了变量i。如果块中没有let i的话，则按作用域链向上查找，打印外部i值0
    let i = 10 // 赋值i = 10，不覆盖第一个i
    console.log(i); // 10，访问第二个i
  }

  console.log(i); // 0，访问第一个i，两个i相互不影响
}
testB();

以上代码，通过testB函数，侧面解释了一下b函数中的行为原因。这一行为模式，体现了let生命中块级作用域的存在，并暴露出了let与var的最大区别。

三、const

function test() {
　　/*
   　　预解析啥也没有，创建、初始化与赋值同时进行
   */
   console.log(a); // 报错，变量仍未创建

   const a = {
   　　name: "Lyu" // 创建对象a，并赋值为一个对象地址
   }
   console.log(a); //{name: "Lyu"}
   console.log(a.name); // Lyu

   a = 1; //报错，常量值不可修改

   a.name = "Jack";
　　console.log(a); // {name: "Jack"}
   console.log(a.name); // Jack
}

test();

分析过程：

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

  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的属性是可以修改的。从代码最后一步可以看出。a.name的值成功修改为"Jack"。这就是const 的第二个特性。

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

四、function

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

/*
　　funtcion test() {...}
    预解析，创建、初始化、赋值三位一体
    此时函数已经完成变量声明的所有操作，在执行环境的任何位置都可以调用函数
*/

test(); //调用函数，只要函数确实存在并可用，那么在执行环境任何位置都可以调用

function test() {...}

分析过程：

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

  1. 预解析，在环境最顶端，创建函数，初始化并赋值为函数定义；
  2. 执行函数，无论函数在何位置，只要可用，就可以调用；

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

然后，function同var一样，同样存在变量声明的特性：

  1. if判断中的变量提升
function test() {
　　/*
    　　预解析
    　　虽然if判断没有执行，但function的变量提升已经发生，此时执行环境中，已经存在变量a，值为undefined；
   */
               　　
   console.log(a) // undefined，变量提升
               　　
   if (false) {
   　　function a(){}; // 变量提升
      console.log(a) //不执行
   }

   console.log(a); //undefined，变量未赋值

   a = 1; //注意，此时因为a的变量提升，未加声明符号的赋值，并没有提升到全局环境中
   console.log(a); // 1
}

test();

console.log(a); // 报错，因为if中a的变量提升，a = 1的赋值并没有存在与全局中。如果注释掉if判断中的内容，a = 1因为没加变量声明符号，相当于在与全局中声明，那么最后的console.log(a)将打印1
  1. for循环中的变量提升
function test() {
　　/*
   　　预解析
      虽然if判断没有执行，但function的变量提升已经发生，此时执行环境中，已经存在变量a，值为undefined；
   */
               　　　
   console.log(a) // undefined，变量提升
               　　
   console.log(i); //报错，暂存死区
   for (let i = 0;i < 0;i++) {
   　　function a() {}; //变量提升
       console.log(a) //未执行
   }
   console.log(i); //报错，let不存在变量提升

   console.log(a); //undefined，变量未赋值

   a = 1;
   console.log(a);
}

test();
console.log(a); //报错，变量不存在

最后，function同var一样，它也可以对同一变量重复声明，而且后边的函数定义会覆盖前边的函数定义：

test(); // 2

function test() {
　　console.log(1);　　
}

function test() {
　　console.log(2);
}

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

五、总结

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

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

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

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

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

本文仅仅简单罗列了在函数声明及操作方面，var、let、const、function的区别，意在为初学者理清概念偏差，少走弯路，并通过理解学习，早日跨入JS门槛。

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

原文地址：https://www.cnblogs.com/keepStudying/p/9972710.html

时间： 2024-10-01 05:04:10

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

var、const、let 的区别

定义变量的三种方式 var.const.let 都可以用来定义变量,但三者之间存在区别. var var 声明变量的时候无需初始化. var 声明的变量可在后面进行修改. var 声明的全局变量可以被函数修改. <!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript">

2-新的变量声明方式（var ,let,const）

以前我们在声明时只有一种方法,就是使用var来进行声明,ES6对声明的进行了扩展,现在可以有三种声明方式了. 字面理解ES6的三种声明方式: var:它是variable的简写,可以理解成变量的意思. let:它在英文中是“让”的意思,也可以理解为一种声明的意思. const:它在英文中也是常量的意思,在ES6也是用来声明常量的,常量你可以简单理解为不变的量 --var声明---- var在ES6里是用来升级全局变量的,我们可以先作一个最简单的实例,用var声明一个变量a,然后用console.

关于Javascript中通过var关键字声明变量和function关键字声明函数的笔记

一.概念 1.变量声明 在JavaScript中,变量一般通过var关键字(隐式声明,let关键字声明除外)进行声明,如下通过var关键字声明a,b,c三个变量(并给其中的a赋值): var a=1,b,c; //关键字显式声明变量a,b,c,并给a赋值console.log(a); //1 //由于b,c未定义变量类型,因此输出"undefined"console.log(b); //undefinedconsole.log(c); //undefined //如果变量未声明,则输出

js中 var functionName = function() {} 和 function functionName() {} 两种函数声明的区别

js中有两种声明函数的方法,分别为: var functionOne = function() { // Some code }; function functionTwo() { // Some code } 为什么会有两种不同的方法?每个方法的优点和缺点分别是什么?有什么情况是一种方法能完成而另外一种方法不能完成的吗? 答: by @Greg 不同点在于functionOne只会在到达赋值的那一行才会被真正定义,而functionTwo会在 包含它的函数或script脚本 执行的时候马上被定

var,let,const声明变量？

var 与 let 的区别? 1.var支持变量预检测,let不支持 console.log(a); // undefined 程序不会报错 var a = 1; console.log(b); //程序报错 b is not defined let b = 2; 2.let 不支持重复声明 var a = 1; var a = 10; console.log(a); // 10 let b = 2; let b = 200; console.log(b); //程序报错 Identifier

ES6和ES5变量声明的区别(var let const)

// es5的语法与es6的语法区别 // var let const console.log(name);//undefine,不会报错,因为变量声明会提到作用域的最前面 var name="aa"; for(var i=1;i<7;i++){ console.log(i); } console.log(i);//8,不会报错因为var声明的变量没有块级作用域 /** * 总结 var 声明的变量,声明语句会提到作用域的最前面,并且没有块级作用域 */ console.log(

var/let/const区别何在？？

原文地址:http://www.cnblogs.com/liuhe688/p/5845561.html let和const有很多相似之处,先说一说let吧. 1. let添加了块级作用域 我们知道,JavaScript是没有块级作用域的,如果在块内使用var声明一个变量,它在代码块外面仍旧是可见的: if (true) { var foo = 3; } console.log(foo); // 3 for (var i = 0; i < 9; i++) { var j = i; } consol

es6（var,let,const,set,map,Array.from()）

1.变量声明--var,const,let 1.1 var - (全局作用域,局部作用域)会有变量提升 //第一个小例子 <script> var num = 123; function fn(){ console.log(num); // undefined var num = 46; console.log(num) // 46 } fn() </script> //为什么第一个输出值会是undefined,而不是123呢?因为这里存在着变量名的提升,其实上述语句相当于: &l

javascript中的立即执行函数(function(){…})()

javascript中的立即执行函数(function(){…})() 深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是用(function(){…})()包住业务代码,使用jquery时比较常见. ( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此.要