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 相关文章推荐
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
javascript下高性能字符串连接StringBuffer类
Aug 16 Javascript
Javascript面向对象扩展库代码分享
Mar 27 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
jquery插入兄弟节点的操作方法
Dec 07 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
从零开始搭建一个react项目开发
Feb 09 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
用缓存实现静态页面的测试
2006/12/06 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
javascript入门教程基础篇
2015/11/16 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
Node.js 路由的实现方法
2019/06/05 Javascript
vue v-model的用法解析
2020/10/19 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
python matplotlib库绘制散点图例题解析
2019/08/10 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
有750多个顶级品牌的瑞士时尚在线:ABOUT YOU
2017/01/04 全球购物
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
波兰最大的宠物用品网上商店:FERA.PL
2019/08/11 全球购物
LINUX下线程,GDI类的解释
2016/12/14 面试题
《莫高窟》教学反思
2014/02/25 职场文书
少年雷锋观后感
2015/06/10 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL