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 相关文章推荐
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
Jan 20 Javascript
Javascript实现单张图片浏览
Dec 18 Javascript
jQuery实现跨域
Feb 03 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
新手vue构建单页面应用实例代码
Sep 18 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 Javascript
JS实现网站楼层导航效果代码实例
Jun 16 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实现字符串首字母转换成大写的方法
2015/03/17 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
详解Django框架中的视图级缓存
2015/07/23 Python
浅谈django中的认证与登录
2016/10/31 Python
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
教师自我反思材料
2014/02/14 职场文书
法律进企业活动方案
2014/03/04 职场文书
教师党员一句话承诺
2014/03/28 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
应急处置方案
2014/06/16 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
财产分割协议书
2016/03/22 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
Python实现滑雪小游戏
2021/09/25 Python
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android