var与let声明变量的区别

快乐打工仔 分类:实例代码

var与let声明变量的区别属于前端实例代码,有关更多实例代码大家可以查看

使用var可以声明一个变量,代码实例如下:

var webName="犀牛前端部落";

上述代码通过var声明一个变量,并赋值"犀牛前端部落"。

ES2015新增let命令,它也可以声明一个变量。

代码实例如下:

let webName="犀牛前端部落";
console.log(webName);

代码运行效果截图如下:

前端教程

虽然两者都可以声明变量,但是区别还是很大的,下面通过代码实例做一下介绍。

关于let命令的更多内容可以参阅JavaScript let 命令一章节。

一.let没有变量前置现象:

使用var声明变量具有前置现象,代码实例如下:

console.log(webName);
var webName="犀牛前端部落";

代码运行效果截图如下:

前端教程

关于变量声明前置现象可以参阅JavaScript 变量与函数声明前置一章节。

再来看使用let声明的变量,代码如下:

console.log(webName);
let webName="犀牛前端部落";

代码运行效果截图如下:

前端教程

由此可见let声明变量没有前置效果。

二.let在全局作用域声明变量不能用全局对象引用:

在全局作用域使用var声明的变量在某种程度可以认为它是全局对象的属性。

所以可以使用全局对象引用它,代码实例如下:

var webName="犀牛前端部落";
console.log(window.webName);

代码运行效果截图如下:

前端教程

但是使用let声明的变量不可以,代码实例如下:

let webName="犀牛前端部落";
console.log(window.webName);

代码运行效果截图如下:

前端教程

三.let声明变量受限于块级作用域:

关于块级作用域的概念可以参阅JavaScript 块级作用域一章节。

ES2015新增块级作用域概念,但是它对var声明的变量没有作用。

代码实例如下:

if(true){
    var webName="犀牛前端部落";
}
console.log(webName);

代码运行效果截图如下:

前端教程

再来看let声明变量的表现,代码实例如下:

if(true){
    let webName="犀牛前端部落";
}
console.log(webName);

代码运行效果截图如下:

前端教程

如果let声明变量处于块级作用域内,那么此变量的作用范围就是此块级作用域。

四.let命令不允许重复声明:

var是一个比较宽松的命令,它允许重复声明多个同名变量。

后面的会覆盖前面的,代码实例如下:

var webName="犀牛前端部落";
var webName="百度";
var webName="李彦宏";
console.log(webName);

代码运行效果截图如下:

前端教程

上面代码声明了三个同名变量webName,当然还可以再多。

没有问题,var允许这么做,但是let命令就没有这么宽容了,代码实例如下:

let webName="犀牛前端部落";
let webName="百度";
console.log(webName);

代码运行效果截图如下:

前端教程

代码报错,因为变量被重复声明,再来看一段代码实例:

let webName="犀牛前端部落";
if(true){
  let webName="百度";
}
console.log(webName);

代码运行效果截图如下:

前端教程

上面代码完全没有问题,不是不允许出现重名变量,而是不允许在同一作用域声明重名变量。

五.let声明变量会形成暂时性死区:

暂时性死区(temporal dead zone)概念在MDN出现,但是ES2015文档并没有找到明确的定义。

假定这个概念存在,那么从变量声明所在的作用域顶端到变量声明这块区域就是暂时性死区。

在这个区域内,该变量不能被使用,总结来说,let声明变量,必须先声明再使用。

代码实例如下:

let webName = "犀牛前端部落";
if (true) {
  webName = "百度";
  let webName;
}

代码运行效果截图如下:

前端教程

在块级作用域声明变量webName,那么此局部变量会绑定所在块级作用域。

此作用域中,变量声明之前使用此变量会报错,也不会受到上层作用域同名变量的影响。

var与let声明变量的区别,这样的场景在实际项目中还是用的比较多的,关于var与let声明变量的区别就介绍到这了。

回复

我来回复
  • 暂无回复内容