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 相关文章推荐
document.documentElement && document.documentElement.scrollTop
Dec 01 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 Javascript
分享我的jquery实现下拉菜单心的
Nov 29 Javascript
Jquery把获取到的input值转换成json
May 15 jQuery
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
JS事件流与事件处理程序实例分析
Aug 16 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 park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
javascript instanceof,typeof的区别
2010/03/24 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
基本DOM节点操作
2017/01/17 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
Python手机号码归属地查询代码
2016/05/04 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
css3中transition属性详解
2014/09/02 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
迎八一活动主题
2014/01/31 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
2014年人事部工作总结
2014/12/03 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
Python3的进程和线程你了解吗
2022/03/16 Python