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创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
用VsCode编辑TypeScript的实现方法
May 07 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
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
php curl基本操作详解
2013/07/23 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
javascript替换已有元素replaceChild()使用介绍
2014/04/03 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
基于plt.title无法显示中文的快速解决
2020/05/16 Python
python中怎么表示空值
2020/06/19 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
杭州联环马网络笔试题面试题
2013/08/04 面试题
销售口号大全
2014/06/11 职场文书
售房委托书
2014/08/30 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
技术股东合作协议书
2014/12/02 职场文书
社区端午节活动总结
2015/02/11 职场文书
护理心得体会范文
2016/01/22 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书