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 脚本将当地时间转换成其它时区
Mar 19 Javascript
通过判断JavaScript的版本实现执行不同的代码
May 11 Javascript
基于Jquery实现键盘按键监听
May 11 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
JS实现面向对象继承的5种方式分析
Jul 21 Javascript
vue实例中data使用return包裹的方法
Aug 27 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 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生成静态页面详解
2006/11/19 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
php中smarty区域循环的方法
2015/06/11 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
详解参数传递四种形式
2015/07/21 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
python实现apahce网站日志分析示例
2014/04/02 Python
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
Python 爬虫图片简单实现
2017/06/01 Python
Python分治法定义与应用实例详解
2017/07/28 Python
python网络应用开发知识点浅析
2019/05/28 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
大学生新学期计划书
2014/04/28 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
小学四年级学生评语
2014/12/26 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
PyTorch的Debug指南
2021/05/07 Python