Javascript中var与let之间的不同和相同

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通常很少使用。

以上就是Javascript中var与let之间的不同和相同的详细内容，更多请关注Gxl网其它相关文章！