ES6入门教程之let、const的使用方法


Posted in Javascript onApril 13, 2019

一、前提

解决ES5中只有全局作用域和函数作用域,没有块级作用域而带来的不合理的场景。

let

基本用法

用法和var 一样,只是let声明的变量只有在let命令所在的代码块有效

{
 let a = 10;
 var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

可以看出var 声明的变量在代码块之外也是可以调用,而let声明的则调用报错。所以let 声明只在它声明的当前代码块中才能调用。

变量提升

在使用 var 的时候会出现 “变量提升”的现象,即变量可以在声明之前使用,值为undefined。let 改变了这种现状,但是必须先声明在使用,如果在声明之前使用则会出现报错。如下:

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

暂时性死区

只要块级作用域内部存在 let 或者 const 命令,它所声明的变量就“绑定”在这个区域,不会受外部影响。且暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。如下:

var tmp = 123;

if (true) {
 tmp = 'abc'; // ReferenceError
 let tmp;
}

ES6 明确规定,如果区块中存在 let 和 const 命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。

总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。如下:

if (true) {
 // TDZ开始
 tmp = 'abc'; // ReferenceError
 console.log(tmp); // ReferenceError

 let tmp; // TDZ结束
 console.log(tmp); // undefined

 tmp = 123;
 console.log(tmp); // 123
}

注意:

++使用let声明变量时,只要变量在还没有声明完成前使用,就会报错。上面这行就属于这个情况,在变量x的声明语句还没有执行完成前,就去取x的值,导致报错”x 未定义“。++

不允许重复声明

let 不允许在同一个作用域内声明同一个变量,如下:

// 报错
function func() {
 let a = 10;
 var a = 1;
}

// 报错
function func() {
 let a = 10;
 let a = 1;
}

或者如下:

function func(arg) {
 let arg;
}
func() // 报错

function func(arg) {
 {
 let arg;
 }
}
func() // 不报错

块级作用域

上面也提到过在es5中没有块级作用域的概念,只有函数作用域和全局作用域,那么就带来了一些问题,如下:

var tmp = new Date();

function f() {
 console.log(tmp);
 if (false) {
 var tmp = 'hello world';
 }
}

f(); // undefined


外层声明被内层声明所覆盖,内层使用的是外层的声明,内层变量提升导致 undefinded

第二种:计数循环全局泄露,如下:

var s = 'hello';

for (var i = 0; i < s.length; i++) {
 console.log(s[i]);
}

console.log(i); // 5

常见的面试题,最后输出不是预料中的 1 2 3 4 5 而全部是 5

ES6的块级作用域,实际上就是let 新增的,如下:

function f1() {
 let n = 5;
 if (true) {
 let n = 10;
 }
 console.log(n); // 5
}

内外层的 n 互不干扰

ES6中 允许作用域任意嵌套,并且互不干扰,如下:

内外层可以同名

{{{{
 let insane = 'Hello World';
 {let insane = 'Hello World'}
}}}};

或者

{{{{
 {let insane = 'Hello World'}
 console.log(insane); // 报错
}}}};

块级作用域的出现可以让以下立即执行函数的写法不必要,如下:

// IIFE 写法
(function () {
 var tmp = ...;
 ...
}());

// 块级作用域写法
{
 let tmp = ...;
 ...
}

块级作用域和函数声明

在ES5中,函数只能在顶层作用域和函数作用域中声明,不能在块级作用域中声明,但是浏览器为了兼容性,还是可以在块级作用域中声明,理论上在ES6中 块级作用域中声明的函数,在外部调用会报错,考虑环境的问题,应当避免在块级作用域中声明函数,如果需要也应当写成函数表达式的方式,而不是函数声明语句,如下:

// 函数声明语句
{
 let a = 'secret';
 function f() {
 return a;
 }
}

// 函数表达式
{
 let a = 'secret';
 let f = function () {
 return a;
 };
}

const

const声明的是一个常量 如下:

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

声明之后如果在赋值,将会报错,同时因为声明的是常量,即const声明后即要赋值不然也会报错
const 和 let 相同,声明也只在当前的块级作用域生效。同样也不会声明提升,也存在暂时死区,只能在声明之后使用,且和 let 一样不得重复声明,不能重新赋值。

重要:

const 所不能改变的并不是值,而是变量指向的那个内存地址所保存的值不能变动,对于简单类型(数值、字符串、布尔值),值就保存在变量所指向的内存地址中,因此等同于常量。而对于复合类型(数组、对象),变量指向的内存地址,保存的只是一个指向实际数据的指针,const 只能保证这个指针是固定的(即总指向一个固定的地址)。至于它指向的数据结构则是不能控制的 ,如下:

const foo = {};

// 为 foo 添加一个属性,可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象,就会报错
foo = {}; // TypeError: "foo" is read-only

常量foo储存的是一个地址,这个地址指向一个对象。不可变的只是这个地址,
即不能把foo指向另一个地址,但对象本身是可变的,所以依然可以为其添加新属性。

或者

const a = [];
a.push('Hello'); // 可执行
a.length = 0; // 可执行
a = ['Dave']; // 报错

常量a是一个数组,这个数组本身是可写的,但是如果将另一个数组赋值给a,就会报错

如果真的想将声明对象冻结,不能在改变 则应该使用object.freeze()

const foo = Object.freeze({});

// 常规模式时,下面一行不起作用;
// 严格模式时,该行会报错
foo.prop = 123;

对象也可以冻结

var constantize = (obj) => {
 Object.freeze(obj);
 Object.keys(obj).forEach( (key, i) => {
 if ( typeof obj[key] === 'object' ) {
 constantize( obj[key] );
 }
 });
};

ES6 声明变量的六种方法

1. function
2. var
3. let
4. const
5. import
6. class

顶层对象的属性

在浏览器环境指的是window对象,在 Node 指的是global对象,ES5 之中,顶层对象的属性与全局变量是等价的。

window.a = 1;
a // 1

a = 2;
window.a // 2

global 对象

ES5 的顶层对象,本身也是一个问题,因为它在各种实现里面是不统一的。

  1. 浏览器里面,顶层对象是window,但 Node 和 Web Worker 没有window。
  2. 浏览器和 Web Worker 里面,self也指向顶层对象,但是 Node 没有self。
  3. Node 里面,顶层对象是global,但其他环境都不支持。

同一段代码为了能够在各种环境,都能取到顶层对象,现在一般是使用this变量,但是有局限性。

  1. 全局环境中,this会返回顶层对象。但是,Node 模块和 ES6 模块中,this返回的是当前模块。
  2. 函数里面的this,如果函数不是作为对象的方法运行,而是单纯作为函数运行,this会指向顶层对象。但是,严格模式下,这时this会返回undefined。
  3. 不管是严格模式,还是普通模式,new Function('return this')() ,总是会返回全局对象。但是,如果浏览器用了 CSP(Content Security Policy,内容安全策略),那么eval、new Function这些方法都可能无法使用。

总结

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

Javascript 相关文章推荐
用js实现多域名不同文件的调用方法
Jan 12 Javascript
Mootools 1.2教程 事件处理
Sep 15 Javascript
文本框输入时 实现自动提示(像百度、google一样)
Apr 05 Javascript
js对象内部访问this修饰的成员函数示例
Apr 27 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
简单实现JS倒计时效果
Dec 23 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 Javascript
Vue中 axios delete请求参数操作
Aug 25 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 #Javascript
微信小程序template模版的使用方法
Apr 13 #Javascript
vue基于viewer实现的图片查看器功能
Apr 12 #Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 #Javascript
详解js创建对象的几种方法及继承
Apr 12 #Javascript
详解JQuery基础动画操作
Apr 12 #jQuery
React中阻止事件冒泡的问题详析
Apr 12 #Javascript
You might like
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
IE和Firefox下event事件杂谈
2009/12/18 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
Python装饰器基础详解
2016/03/09 Python
Python 操作文件的基本方法总结
2017/08/10 Python
使用python为mysql实现restful接口
2018/01/05 Python
Python获取当前函数名称方法实例分享
2018/01/18 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
django的登录注册系统的示例代码
2018/05/14 Python
解决Python使用列表副本的问题
2019/12/19 Python
win10安装python3.6的常见问题
2020/07/01 Python
利用Python优雅的登录校园网
2020/10/21 Python
pycharm 快速解决python代码冲突的问题
2021/01/15 Python
软件缺陷的分类都有哪些
2014/08/22 面试题
幼儿园元旦家长感言
2014/02/27 职场文书
租赁协议书范本
2014/04/22 职场文书
创新社会管理心得体会
2014/09/12 职场文书
交通安全月活动总结
2015/05/08 职场文书
教学反思怎么写
2016/02/24 职场文书
分家协议书范本
2016/03/22 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server