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 相关文章推荐
Dom 是什么的详细说明
Oct 25 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 Javascript
javascript闭包的高级使用方法实例
Jul 04 Javascript
js控制表单操作的常用代码小结
Aug 15 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
Aug 28 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 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读取xml实例代码
2010/01/28 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
js中将具有数字属性名的对象转换为数组
2011/03/06 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
2014/08/18 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
JS实现移动端实时监听输入框变化的实例代码
2017/04/12 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
React优化子组件render的使用
2019/05/12 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
使用Python构建Hopfield网络的教程
2015/04/14 Python
最基础的Python的socket编程入门教程
2015/04/23 Python
Python标准库之Sys模块使用详解
2015/05/23 Python
代码分析Python地图坐标转换
2018/02/08 Python
Python hashlib模块用法实例分析
2018/06/12 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
python对视频画框标记后保存的方法
2018/12/07 Python
django 取消csrf限制的实例
2020/03/13 Python
浅析python连接数据库的重要事项
2021/02/22 Python
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
机械设计职业生涯规划书
2013/12/27 职场文书
婚礼新郎父母答谢词
2014/01/16 职场文书
比赛口号大全
2014/06/10 职场文书
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android
在redisCluster中模糊获取key方式
2021/07/09 Redis
业余无线电通联Q语
2022/02/18 无线电
tomcat默认最大连接数及相关调整方法
2022/05/06 Servers