Javascript中var和let间差异

Javascript申明变量的方式有let、var、const三种不同方式。let和const行为在词法环境中相同,但是var差异很大,var在早起被引入,现代Javascript一般不使用,但旧代码到处都是,本文详细说明,希望不让你迷惑。

示例1 两者相同

function sayHi() {
  var phrase = "Hello"; // local variable, "var" instead of "let"

  alert(phrase); // Hello
}

sayHi();

alert(phrase); // Error, phrase is not defined

示例2 两者不同

下面是不同的,var没有块区域,仅为全局或函数区域,可以越过块区域。

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

如果我们使用 let 在第二行,在alter语句不能访问test百年来。但是var忽略代码块,所以我们其实申明test变量为全局变量了。

对loop也是同样的,var不能是块区域或局部循环区域:

for(var i = 0; i < 10; i++) {
  // ...
}

alert(i); // 10, "i" is visible after loop, it's a global variable

如果代码块在函数里,那么var变成了函数级变量:

function sayHi() {
  if (true) {
    var phrase = "Hello";
  }

  alert(phrase); // works
}

sayHi();
alert(phrase); // Error: phrase is not defined

如你所见,var穿过if,for或其他代码块,这时早期Javascript块没有词法环境,var是早起遗留产物。

var在函数开始时处理

var申明在函数(或脚本开始处,为全局变量)开始点处理。换言之,var变量在函数开始处被申明,无论其被定义在哪里(假设不是定义在嵌套函数里)。代码示例:
function sayHi() {
phrase = “Hello”;

alert(phrase);

  var phrase;
}

与下面代码效果一样:

function sayHi() {
  var phrase;

  phrase = "Hello";

  alert(phrase);
}

甚至在被忽略的代码块中:

function sayHi() {
  phrase = "Hello"; // (*)

  if (false) {
    var phrase;
  }

  alert(phrase);
}

一般称这种行为叫“提升”,因为所有var被提升至函数顶端。所以,示例中if(false)段代码永远不被执行,但没关系,var被提升至函数顶部,所有示例中(*)行变量已经存在。

申明被提升,但赋值没有提升
演示示例如下:
function sayHi() {
alert(phrase);

var phrase = "Hello";
}

sayHi();

var = phrase = “Hello” 有两个动作
1、申明变量 var
2、变量赋值 =

申明被提升至函数顶部,但赋值总是在原来的地方,所以代码实际效果如下:

function sayHi() {
  var phrase; // declaration works at the start...

  alert(phrase); // undefined

  phrase = "Hello"; // ...assignment - when the execution reaches it.
}

sayHi();

因为所有all申明被提升至函数顶部,所以我们能在函数内其他地方引用,但变量在赋值前是undefined。上面两个示例alert运行都没有错误。因为变量phrase已经存在,但有没有被赋值,所以显示undefined。

总结

针对var有两个主要差异:

1、变量无块范围,最小可见范围是函数级。
2、变量申明被提升至函数顶部。

这种差异大多数情况不是好事,我们不能创建块级变量,占用更多内存;提升变量位置给错误提供更多空间。因此,一般新的脚本var通常很少使用。