Skip to main content
 首页 » 编程设计

Javascript中var和let间差异

2022年07月19日126shihaiming

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


本文参考链接:https://blog.csdn.net/neweastsun/article/details/68483965