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 相关文章推荐
web 页面分页打印的实现
Jun 22 Javascript
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
jQuery+HTML5实现弹出创意搜索框层
Dec 29 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 Javascript
js实现缓动动画
Nov 25 Javascript
小程序自定义轮播图圆点组件
Jun 25 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
探讨方法的重写(覆载)详解
2013/06/08 PHP
PHP的引用详解
2015/02/22 PHP
PHP中16个高危函数整理
2019/09/19 PHP
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
JS对大量数据进行多重过滤的方法
2016/11/04 Javascript
javascript操作cookie
2017/01/17 Javascript
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
python进阶教程之异常处理
2014/08/30 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
公司爱心捐款倡议书
2014/05/14 职场文书
道士塔读书笔记
2015/06/30 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS
聊聊redis-dump工具安装问题
2022/01/18 Redis