JS变量中有var定义和无var定义的区别以及es6中let命令和const命令

 更新时间:2017年02月19日 15:44:18   作者:jian_xi  
这篇文章主要介绍了JS变量中有var定义和无var定义的区别以及es6中let命令和const命令,需要的朋友可以参考下

 之前我们在写js代码的时候都知道可以用var定义全局变量和局部变量,也可以省略var,而且在非严格模式下不会报错,但是并不知道两者的区别...

var x = 1;
y = 4;
console.log(x);//1
console.log(y);//4
console.log(window.x);//1
console.log(window.y);//4

简单测试下可以知道定义的x和y都被挂载在window对象上,变为window下的属性,这并不能说明什么...

delete x;
delete y;
console.log(window.x);//1
console.log(window.y);//undefined

再看看执行上面代码之后x属性没有被删除,y被删除了,这是区别就来了

在通过var进行定义后的变量不能被delete删除,这是什么原因?ECMAScript 5标准中,可以通过Object.getOwnPropertyDescriptor()来获取对象自身某个property的属性信息:

console.log(Object.getOwnPropertyDescriptor(window,"x"));
console.log(Object.getOwnPropertyDescriptor(window,"y"));

得到如下信息:

当不使用var进行定义是,变量默认的configurable为true,可以进行delete等命令进行操作,而当var在定义一个全局变量的时候configurable 变为了false,即不会被delete删除.

此外,简单说一下关于变量提升问题

alert(a);//Uncaught ReferenceError: a is not defined
a = 100;alert(b);//undefined

var b = 200;先说第二段代码,var声明的全局变量b在js中会进行代码提升,也就是说var b = 200;会被分解为var b;b=200;代码解析的第时候会将var b;提升到最前面,并且在内存中开辟一个空间,由于b没有被赋值,默认为undefined.第一段代码中当js执行alert()函数时候由于没有进行var声明,变量没有被提升,不存在内存开辟,所以在alert时候直接报错!

在ECMAScript6标准中,一个重要的概念就是"JavaScript严格模式",需要在最前面加上"use strict";

let注意点:

1.let拥有块级作用域,一个{}就是一个作用域

2.let在其作用域下面不存在变量提升

3.let在其作用域中不能被重复声明(函数作用域和块级作用域)

第一点:let的块级作用域

注意:以下代码都在严格模式下执行的

let n = 10;
if(true){
 let n = 50;
}
console.log(n);//10表示外层代码块不受内层代码块的影响,如果是用var定义的变量n,那么输出的就是修改后的50.

第二点:变量提升问题

alert(a);//Uncaught ReferenceError: a is not defined
let a = 100;

不同var,let不存在变量提升,以上写法会直接报错.

第三点:重复声明问题

(function(){
 let lTest = "let";
 var vTest = "var"
 let lTest = "let changed";//Uncaught SyntaxError: Identifier 'lTest' has already been declared
 var vTest = "var changed";
 console.log(lTest);
 console.log(vTest);
})();

let在同一个作用域下不允许进行重复变量声明.否则也是直接报错!!!

const命令

const用来声明常量,一旦声明,其值就不可以更改,如果你非得修改变量的值,js不会报错,只是默默表示失败(不起作用)

const的作用域与let相同,只在声明所在的块级作用域内有效,并且也是和let一样不可以重复进行声明.

相关文章

  • JavaScript创建对象的几种方式及关于this指向问题

    JavaScript创建对象的几种方式及关于this指向问题

    这篇文章主要介绍了JavaScript创建对象的几种方式及关于this指向问题,文章围绕主题展开详细的内容介绍,具有一定的参考价值。需要的小伙伴可以参考一下
    2022-07-07
  • js canvas实现俄罗斯方块

    js canvas实现俄罗斯方块

    这篇文章主要为大家详细介绍了js canvas实现俄罗斯方块,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • 在JavaScript中对HTML进行反转义详解

    在JavaScript中对HTML进行反转义详解

    下面小编就为大家带来一篇在JavaScript中对HTML进行反转义详解。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JS重载实现方法分析

    JS重载实现方法分析

    这篇文章主要介绍了JS重载实现方法,结合实例形式分析了javascript重载的实现与使用方法,需要的朋友可以参考下
    2016-12-12
  • JavaScript 深拷贝的循环引用问题详解

    JavaScript 深拷贝的循环引用问题详解

    如果说道实现深拷贝最简单的方法,我们第一个想到的就是 JSON.stringify() 方法,因为JSON.stringify()后返回的是字符串,所以我们会再使用JSON.parse()转换为对象,这篇文章主要介绍了JavaScript 深拷贝的循环引用问题,需要的朋友可以参考下
    2022-12-12
  • JavaScript操作XML文件之XML读取方法

    JavaScript操作XML文件之XML读取方法

    这篇文章主要介绍了JavaScript操作XML文件之XML读取方法,涉及javascript操作XML文件的相关技巧,需要的朋友可以参考下
    2015-06-06
  • 学习JavaScript设计模式之状态模式

    学习JavaScript设计模式之状态模式

    这篇文章主要为大家介绍了JavaScript设计模式中的状态模式,对JavaScript设计模式感兴趣的小伙伴们可以参考一下
    2016-01-01
  • JS无限级导航菜单实现方法

    JS无限级导航菜单实现方法

    今天小编就为大家分享一篇关于JS无限级导航菜单实现方法,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • web-view实现app应用与网页的数据交互方式

    web-view实现app应用与网页的数据交互方式

    这篇文章主要介绍了web-view实现app应用与网页的数据交互方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-05-05
  • js跨域访问示例(客户端/服务端)

    js跨域访问示例(客户端/服务端)

    有关跨域访问的的文章,可以搜到很多,基本上大同小异,下面有个不错的访问示例,大家可以参考下
    2014-05-05

最新评论