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 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
jquery自定义属性(类型/属性值)
May 21 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
JS实现普通轮播图特效
Jan 01 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
解析smarty模板中类似for的功能实现
2013/06/18 PHP
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
php获取excel文件数据
2017/04/21 PHP
PHP培训要多少钱
2017/06/06 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
python发送伪造的arp请求
2014/01/09 Python
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
班干部竞选演讲稿
2014/04/24 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
党性心得体会
2014/09/03 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
通用员工手册范本
2015/05/14 职场文书
技能培训通讯稿
2015/07/18 职场文书
劳动模范获奖感言
2015/07/31 职场文书
python实现自定义日志的具体方法
2021/05/28 Python