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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

示例2 两者不同

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

if (true) {
var test = true; // use "var" instead of "let"
}
alert(test); // true, the variable lives after if

• 1
• 2
• 3
• 4
• 5
• 6

如果我们使用 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

• 1
• 2
• 3
• 4
• 5
• 6

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

function sayHi() {
if (true) {
var phrase = "Hello";
}
alert(phrase); // works
}
sayHi();
alert(phrase); // Error: phrase is not defined

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

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

var在函数开始时处理

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

alert(phrase);
var phrase;
}

• 1
• 2
• 3
• 4
• 5

与下面代码效果一样：

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

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

function sayHi() {
phrase = "Hello"; // (*)
if (false) {
var phrase;
}
alert(phrase);
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

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

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

var phrase = "Hello";
}
sayHi();

• 1
• 2
• 3
• 4
• 5

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();

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

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

总结

针对var有两个主要差异：

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

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

最后

以上就是霸气蜻蜓为你收集整理的let与var的不同Javascript中var和let间差异的全部内容，希望文章能够帮你解决let与var的不同Javascript中var和let间差异所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。