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 相关文章推荐
DOM相关内容速查手册
Feb 07 Javascript
jquery 插件开发备注
Aug 27 Javascript
JS中的log对象获取以及debug的写法介绍
Mar 03 Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 Javascript
Ionic默认的Tabs模板使用实例
Aug 29 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
基于angular实现模拟微信小程序swiper组件
Jun 11 Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 Javascript
微信小程序webview 脚手架使用详解
Jul 22 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 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
浅谈ThinkPHP的URL重写
2014/11/25 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
python的常见命令注入威胁
2013/02/18 Python
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
常见python正则用法的简单实例
2016/06/21 Python
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
使用CSS3在触屏上为按钮实现激活效果
2013/09/27 HTML / CSS
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
UNIX文件系统分类
2014/11/11 面试题
护理学毕业生自荐信
2013/10/02 职场文书
行政办公员自我评价分享
2013/12/14 职场文书
社会实践感言
2014/01/25 职场文书
药学专业学生的自我评价分享
2014/02/06 职场文书
节能标语大全
2014/06/21 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
公司2014年度工作总结
2014/12/10 职场文书
天坛导游词
2015/02/02 职场文书