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 相关文章推荐
function, new function, new Function之间的区别
Mar 08 Javascript
一个用js实现的页内搜索代码
May 23 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
Feb 18 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
JavaScript函数基础详解
Feb 03 Javascript
vue生命周期的探索
Apr 03 Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 Javascript
如何通过JS实现日历简单算法
Oct 14 Javascript
jquery插件实现轮播图效果
Oct 19 jQuery
用javascript制作qq注册动态页面
Apr 14 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操作系统安装LAMP环境
2015/06/26 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
php session的应用详细介绍
2017/03/22 PHP
学习jquery之一
2007/04/27 Javascript
javascript加号"+"的二义性说明
2013/03/04 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
Python logging模块handlers用法详解
2020/08/14 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
化学学院毕业生自荐信范文
2013/12/17 职场文书
小学中队长竞选稿
2015/11/20 职场文书
Vue3.0 手写放大镜效果
2021/07/25 Vue.js
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript
Python OpenCV超详细讲解基本功能
2022/04/02 Python