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


Posted in Javascript onFebruary 19, 2017

 之前我们在写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"));

得到如下信息:

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

当不使用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 相关文章推荐
js 遍历对象的属性的代码
Dec 29 Javascript
jquery html动态生成select标签出问题的解决方法
Nov 20 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
可以浮动某个物体的jquery控件用法实例
Jul 24 Javascript
javascript入门教程基础篇
Nov 16 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 Javascript
微信小程序 新建登录页并实现tabBar隐藏
Jun 13 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
jQuery实现一个简单的轮播图
Feb 19 #Javascript
js 博客内容进度插件详解
Feb 19 #Javascript
ajax接收后台数据在html页面显示
Feb 19 #Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 #Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 #Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 #Javascript
Angular 输入框实现自定义验证功能
Feb 19 #Javascript
You might like
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
Python 含参构造函数实例详解
2017/05/25 Python
anaconda如何查看并管理python环境
2019/07/05 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
PyTorch笔记之scatter()函数的使用
2020/02/12 Python
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
南京迈特望C/C++面试题
2012/07/09 面试题
体育教育毕业生自荐信
2013/11/21 职场文书
收银员的岗位职责范本
2014/02/04 职场文书
11月升旗仪式讲话稿
2014/02/15 职场文书
2014年预备党员学习两会心得体会
2014/03/17 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
幽默导游词开场白
2015/05/29 职场文书
运动会广播稿300字
2015/08/19 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书