swift 发布于 2023年06月08日
最近在做微信小程序相关的事情,就又拾起了 JavaScript。 对于互联网开发者来说,无论你开发何种类型的应用,或多或少都会接触到它。闲言少叙,直奔主题。
var,let 和 const这三个都是在 JavaScript 中声明变量的关键字。 早期的互联网应用中,很多是以 Web 页面的形式进行交互,当时的 JavaScript 更多是用于前端页面相关的开发,大多数浏览器也没有对 let
和 const
关键字的支持。 所以 var
关键字是最早 JavaScript 开发者使用并习惯的声明变量的方法。
也是随着 ES 标准的逐步完善,以及主流浏览器逐渐对标准的支持, 更进一步,现在 JavaScript 的应用不仅限于浏览器前端,包括服务端,以及其他生态越来越多的使用 JavaScript
环境, 比如微信小程序。
这也就引出了后两个关键字 let 和 const 的出现,我们来分别看看他们各自的区别吧。
作用域var
首先从作用域来说, var
声明的变量只支持全局作用域
和函数作用域
。比如下面代码:
{
var x = 1;
}
console.log(x); // 输出: 1
}
这里最终的输出内容是 1。 也就是 x 变量的值。 如果你有过其他语言开发经验,肯定会觉得,x 明明是在一对大括号的代码块中定义的,怎么可能在代码块(Block) 外面还可以访问到 x 变量,还能正常输出它的值呢?
上面代码不难看出, var
声明的变量是没有块作用域
这个概念的。我们在 test
函数中定义的变量 x
在整个函数内都是可以访问到的, 无论它在多少层的代码块内声明, 只要他的定义在函数内, 那么所有地方都能访问到它。
这个机制在某些情况下,可能就会引发一些奇怪的效果,比如:
var list = [1,2,3];
var x = 1;
for(const item of list) {
var x = item;
console.log(x); // 输出: 1,2,3
}
console.log(x); // 输出: 3
}
上面代码中, 我们先在外层定义了一个 x
变量, 然后又在 for
循环中定义了另一个 x
变量。 按照我们通常的理解, 这两个 x
不在一个作用域,互相不影响。 但结果恰恰出乎意料,for
循环内按照预期输出了 list
数组的所有内容, 但是我们外层的最后一行 console.log
,输出的却是 3, 也就是 list
数组最后一个数字。
就是说 for
循环中定义的 x
, 已经影响到外层的 x
了。 这是因为 var
定义的变量没有 块作用域
的概念。只有全局作用域
和函数作用域
。 要么它在函数外面定义,对整个代码文件可访问。 要么它定义在函数中,对整个函数可访问。
let 和 const
let
,const
和 var
最主要的区别就是支持块作用域
. 我们再来看同样的代码:
var list = [1,2,3];
let x = 1;
for(const item of list) {
let x = item;
console.log(x); // 输出: 1,2,3
}
console.log(x); // 输出: 1
}
这次两个 x
变量都用 let
来声明,从输出结果来很容易看出, 用 let
声明的变量正确的将外层的 x
和 for
循环里面的分离开来。
对于 var
声明的变量,可以重复声明,不会造成运行时错误:
var x;
上述代码可以正常运行。 但是对于 let
声明的变量, 如果重复声明的话就会触发运行时错误:
let x;
运行上面代码会产生错误:
所谓 hoisting
机制,可以理解为 var
声明的变量只要代码中存在,不管顺序先后,都会先进行一次初始化。 如下代码:
var x = 10;
console.log(x); // 输出 10
console.log(y); // ReferenceError: y is not defined
我们在上面代码中用 var
定义了变量 x
。 第一行代码在定义变量之前就尝试输出它,输出了结果 undefined。 而最后一行代码,尝试输出一个从未在代码文件中定义的变量 y
,造成了运行时错误 ReferenceError: y is not defined
。
可见,访问一个从未定义的变量 y
, 和在它定义之前访问变量 x
的运行结果是不同的。
var x = 10;
虽然不是在代码最前面定义的, 但是 JavaScript 运行环境在加载代码文件时, 会预先将所有 var
定义的变量进行一次初始化, 然后再才开始执行其他代码。 这也就是造成我们上面代码输出的原因。
TDZ
是 Temporal dead zone
的缩写,简单来说就是我们使用 let
和 const
声明的变量,会在 JavaScript
加载代码的时候先存入 Temporal dead zone
的区域。 直到代码执行到 let
定义这个变量的语句才会结束:
let x = 10;
执行上面代码,就会报注释中的那个错误。同样,const
方式声明的变量也会是这个机制。
let
关键字声明的变量,是可以通过赋值操作符 =
修改引用内容的。 而 const
不能。 从名字中也不难理解了, const
经常标识常量的意思。 虽然通过 =
修改 const
声明的变量本身。 但是如果 const
引用的是数组或是 JSON
对象,我们还是能修改其中的内容的:
x = 20; //TypeError: Assignment to constant variable.
const y = [1,2,3];
y[0] = 3;
console.log(y); // [3,2,3]
以上就是 JavaScript
中 var
, let
和 const
的主要区别了。当然为了每篇文章尽量精简,只把最重要的内容给大家做了介绍,如果对这个内容还想进一步研究。 大家可以参考 MDN 相关的文档:
var https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
let https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
const https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
如果你觉得这篇文章有帮助,还可以关注微信公众号 swift-cafe,会有更多我的原创内容分享给你~
本站文章均为原创内容,如需转载请注明出处,谢谢。
![]() 发现更多精彩 swift-cafe |