ES6学习教程之块级作用域详解


Posted in Javascript onOctober 09, 2017

前言

众所周知ES5之前javascript语言只有函数作用域和全局作用域,使用var来声明变量,var声明的变量还存在变量提升使人困惑不已。我们先来复习一下ES5的var声明,再对比学习let和const 。

var

var声明之函数作用域和全局作用域。

来段代码体会一下:

function getName() {
 if (1 + 1 === 2) {
 var name = 'xixi';
 }

 console.log(name);
}

getName();//xixi

在c或java语言中name本应该只在if块中使用的,但是在if的外面也可以访问到,这个就是 js没有块级作用域的一种体现。这个弊端在for循环中体现的十分明显:

for (var i = 0; i < 10; i ++) {
 // ...
}

console.log(i);// 10

var i的本意是声明个临时变量i,用来遍历数组等,本不应该在for循环的外部访问到,但现在却可以被访问到你说闹不闹心?好一点的程序员会用立即执行函数来模拟块级作用域,原来的我会注意一下尽量不使用相同的变量名?。

(function() {
 for (var i = 0; i < 10; i ++) {
 // ...
 }
})();

console.log(i);// undefined

以上:大家知道了 js 没有块级作用域。

变量可以重复声明

var name = 'xixi';
console.log(name);// xixi
var name= '一步';
console.log(name);// 一步

不报错,困惑不困惑,这个就是变量可以重复声明。

变量提升

function getName() {
 console.log(name);
 var name = 'xixi';
 // ...
}

getName();// undefined

console.log打印name为undefined。为啥不报错呢,对于一直使用js语言的人来说这个现象还好理解,如果是后台转前端的人来说估计得骂人了。这就是所谓的变量提升。简单的向大家解释一下吧。

var name = 'xixi';

这是一条被我们写烂了的语句,包含两个过程:var name; name = 'xixi';分别为变量声明和变量初始化。

变量提升: 无论变量声明var name;处于什么位置,都会被提到作用域的顶部进行。

let

ES6为让变量生命周期更加可控,引入两个非常好的特性let、const。块级作用域、不能重复声明、临时性死区等特性用来解决 var 变量存在的种种问题。

块级作用域

function getName4ES6() {
 if (1 + 1 === 2) {
 let name = 'xixi';
 }

 console.log(name);
}

getName4ES6(); // undefined

终于在{}外面访问不到name了。for循环也变的简单了,大家试一下将for循环的var换成 let.

同一块级作用域内不能重复声明变量

function redefineValue() {
 let name = 'xixi';
 let name = '一步';
}

redefineValue();// Uncaught SyntaxError: Identifier 'name' has already been declared

重复声明会报错

{
 let name = 'xixi';
 console.log(name);// xixi
 {
 let name = 'yibu';
 console.log(name); // yibu
 }
}

注意: 在 ES6中,{}就是一个块级作用域。

临时性死区

function getName4ES6() {
 console.log(name);
 for (let i = 0; i < 10; i ++) {

 }
 let name = 'xixi';
 // ...
}

 
getName4ES6();// Uncaught ReferenceError: name is not defined

在上文ES5中,name还会存在变量提升,值为undefined。ES6中又报错了。怎么解释呢?。。。。这个就是临时性死区的概念,在作用域块中不可以在变量声明前就使用变量,若使用是会出错的。

javascript引擎在发现变量声明时,要么将变量声明提升到作用域的顶部(var声明变量时),要么将变量放在临时性死区中(let、const声明变量时),访问临时性死区中的变量会触发运行时错误。

ES6学习教程之块级作用域详解

const

const和let同样具有块级作用域,不能重复声明,临时性死区的概念。它还具有两个特有的特性:声明的同时必须初始化、变量引用不可以改变。

声明的同时必须初始化

const name;//Uncaught SyntaxError: Missing initializer in const declaration

不赋值,就报错。这个也很好理解const的本意就是用来定义常量,不可变的值。若不在声明时给出初始值以后就再也没有机会了。

值不可变

const name = 'x9x9';
name = 'yyy';// Uncaught SyntaxError: Invalid or unexpected token

那么对象会怎样呢?

const person = {
 name: 'lala',
 age: 40
};

person = {};// VM1042:6 Uncaught TypeError: Assignment to constant variable. at <anonymous>:6:8

引用是不可变的,那我们在看看对象的属性值是什么情况吧~

person.name = 'yoyo';
console.log(person);// {name: "yoyo", age: 40}

没有报错,对象引用不可改变,对象属性可以变更。

let vs const

大家可能会困惑,什么时候使用let,什么时候使用const。let能做的const好像都可以。网上有一种流行做法:能用const就绝不用let,简单粗暴,不过很好用。

个人看法:若变量在后续方法中会被改变,就使用let。一些常量声明使用const, const声明的变量名全部大写。代码中的变量,如果是let声明的就代表其可变,若是const声明的,不论是简单数据类型还是引用类型变量就都不要改变它的值。这样,程序会更加的健壮,大家合作起来也比较方便。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery获取地址栏参数插件(模仿C#)
Oct 26 Javascript
jquery的extend和fn.extend的使用说明
Jan 09 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 Javascript
深入理解js中的加载事件
Feb 08 Javascript
微信小程序 WXML节点信息查询详解
Jul 29 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 Javascript
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
为react组件库添加typescript类型提示的方法
Jun 15 Javascript
JavaScript实现短信倒计时60s
Oct 09 #Javascript
ES6学习教程之对象字面量详解
Oct 09 #Javascript
AngularJS中的路由使用及实现代码
Oct 09 #Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 #Javascript
React Native中的RefreshContorl下拉刷新使用
Oct 09 #Javascript
JS实现的全排列组合算法示例
Oct 09 #Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 #Javascript
You might like
php _autoload自动加载类与机制分析
2012/02/10 PHP
php多层数组与对象的转换实例代码
2013/08/05 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
基于Jquery的简单图片切换效果
2011/01/06 Javascript
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
Python中is与==判断的区别
2017/03/28 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
RealTek面试题
2016/06/28 面试题
应届毕业生简历自我评价
2014/01/31 职场文书
乡镇庆八一活动方案
2014/02/02 职场文书
2014全国两会学习心得体会1000字
2014/03/10 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
好好学习保证书
2015/02/26 职场文书