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 相关文章推荐
javascript权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
window resize和scroll事件的基本优化思路
Apr 29 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
jQuery构造函数init参数分析
May 13 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
Angular4实现鼠标悬停3d倾斜效果
Oct 25 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
vue+iview分页组件的封装
Nov 17 Vue.js
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/06/25 PHP
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
js实现飞机大战小游戏
2020/08/26 Javascript
python生成随机mac地址的方法
2015/03/16 Python
在Python中使用列表生成式的教程
2015/04/27 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
南威尔士家居商店:Leekes
2016/10/25 全球购物
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
小学思品教学反思
2016/02/20 职场文书