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 相关文章推荐
jQuery 方法大全方便学习参考
Feb 25 Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
框架页面高度自动刷新的Javascript脚本
Nov 01 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
jQuery中$.click()无效问题分析
Jan 29 Javascript
JavaScript中的函数声明和函数表达式区别浅析
Mar 27 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
关于layui flow loading占位图的实现方法
Sep 21 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
JS实现随机点名器
Apr 12 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
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
php代码运行时间查看类代码分享
2011/08/06 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
Layui多选只有最后一个值的解决方法
2019/09/02 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
Django中的forms组件实例详解
2018/11/08 Python
通过cmd进入python的实例操作
2019/06/26 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
Django日志及中间件模块应用案例
2020/09/10 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
美国性感女装网站:bebe
2017/03/04 全球购物
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
最新个人职业生涯规划书
2014/01/22 职场文书
委托书范本
2014/09/13 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
签证工作证明模板
2015/06/15 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
导游词之丽江普济寺
2019/10/22 职场文书