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删除数组元素的函数介绍
Mar 27 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
js图片实时加载提供网页打开速度
Sep 11 Javascript
详解webpack+angular2开发环境搭建
Jun 28 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
代码分析vue中如何配置less
Sep 28 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
创建nuxt.js项目流程图解
Mar 13 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 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
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
webstorm中vue语法的支持详解
2018/05/09 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
python二分法实现实例
2013/11/21 Python
Python标准库内置函数complex介绍
2014/11/25 Python
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
英语专业学生个人求职信
2014/01/28 职场文书
学生自我评价范文
2014/02/02 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
大学生个人总结范文
2015/02/15 职场文书
罗马假日观后感
2015/06/08 职场文书
合作合同协议书
2016/03/21 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android