飙血推荐
  • HTML教程
  • MySQL教程
  • JavaScript基础教程
  • php入门教程
  • JavaScript正则表达式运用
  • Excel函数教程
  • AngularJS教程
  • UEditor使用文档
  • ThinkPHP5.0教程

JS函数:var 与 let 的区别

时间:2021-11-29  作者:匿名  

变量有3种定义方式:

1、let

2、const

3、var

var 声明与 let 相似。大部分情况下,我们可以用 let 代替 var 或者 var 代替 let,都能达到预期的效果。

但实际上 var 却有所不同。

“var” 没有块级作用域

用 var 声明的变量,不是函数作用域就是全局作用域。它们在代码块外也是可见的,也就是说,var 声明的变量只有函数作用域和全局作用域,没有块级作用域。

例如:

if (true) {
  var test = true; // 使用 "var" 而不是 "let"
}
alert(test); // true,变量在 if 结束后仍存在

由于 var 会忽略代码块,因此我们有了一个全局变量 test,假设我们使用let则不同。

if (true) {
  let test = true; // 使用 "let"
}
alert(test); // 错误: test is not defined

对于循环也是这样的,var 声明的变量没有块级作用域也没有循环局部作用域:

for (var i = 0; i < 10; i++) {
  var one = 1;
  // ...
}
alert(i);   // 10,"i" 在循环结束后仍可见,它是一个全局变量
alert(one); // 1,"one" 在循环结束后仍可见,它是一个全局变量

如果一个代码块位于函数内部,那么 var 声明的变量的作用域将为函数作用域:

function sayHi() {
  if (true) {
    var phrase = "Hello";
  }
  alert(phrase); // 能正常工作
}
sayHi();
alert(phrase); // Error: phrase is not defined

“var” 允许重新声明

使用 var,我们可以重复声明一个变量,不管多少次都行。如果我们对一个已经声明的变量使用 var,这条新的声明语句会被忽略,直接当作赋值使用。

var user = "Pete";
var user = "John"; // 这个 "var" 无效(因为变量已经声明过了)
// ……不会触发错误
alert(user); // John

“var” 可以先使用后声明

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

也就是说,变量可以先使用再声明,声明会被提升,但是赋值不会。

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

上面例子输出为空,没有值,也就是说,后声明时的赋值杯忽略掉了。

立即调用函数表达式 IIFE

在之前,JavaScript 中只有 var 这一种声明变量的方式,并且这种方式声明的变量没有块级作用域,程序员们就发明了一种模仿块级作用域的方法。这种方法被称为“立即调用函数表达式”(immediately-invoked function expressions,IIFE)。

如今,我们不应该再使用 IIFE 了,但是你可以在旧脚本中找到它们。

IIFE 看起来像这样:

(function() {
  var message = "Hello";
  alert(message); // Hello
})();

这里,创建了一个函数表达式并立即调用。因此,代码立即执行并拥有了自己的私有变量。

搜你所爱
JavaScript基础教程:目录
湘ICP备14001474号-3  投诉建议:234161800@qq.com   部分内容来源于网络,如有侵权,请联系删除。