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温习的一些笔记 基础常用知识小结
Jun 22 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
jquery cookie的用法总结
Nov 18 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
vue-router的hooks用法详解
Jun 08 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 Javascript
react中的DOM操作实现
Jun 30 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/10/09 PHP
一段php加密解密的代码
2007/07/16 PHP
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
php+mysql实现无限级分类
2015/11/11 PHP
php+mysql实现简单登录注册修改密码网页
2016/11/30 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
node使用UEditor富文本编辑器的方法实例
2017/07/11 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
js实现小星星游戏
2020/03/23 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
python函数与方法的区别总结
2019/06/23 Python
python 一维二维插值实例
2020/04/22 Python
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
世界汽车零件:World Car Parts
2019/09/04 全球购物
岗位竞聘演讲稿
2014/01/10 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
2015年植树节活动总结
2015/02/06 职场文书
父亲节寄语大全
2015/02/27 职场文书