文档章节

ECMAScript6块级相关问题

史文帝
 史文帝
发布于 2017/01/12 17:05
字数 1280
阅读 13
收藏 0

 

ECMAScript6块级

let实际上为JavaScript新增了块级作用域。

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

上面的函数有两个代码块,都声明了变量a,运行后输出5。这表示外层代码块不受内层代码块的影响。如果使用var定义变量a,最后输出的值就是10。

 

ES6允许块级作用域的任意嵌套。

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

上面代码使用了一个五层的块级作用域。外层作用域无法读取内层作用域的变量。

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

内层作用域可以定义外层作用域的同名变量。

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

块级作用域的出现,实际上使得获得广泛应用的立即执行函数表达式(IIFE)不再必要了。

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

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

 

为什么需要块级作用域?

ES5只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。

第一种场景,内层变量可能会覆盖外层变量。

var tmp = new Date();

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

f(); // undefined

上面代码中,函数f执行后,输出结果为undefined,原因在于变量提升,导致内层的tmp变量覆盖了外层的tmp变量。

第二种场景,用来计数的循环变量泄露为全局变量。

var s = 'hello';

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

console.log(i); // 5

上面代码中,变量i只用来控制循环,但是循环结束后,它并没有消失,泄露成了全局变量。

块级作用域与函数声明

函数能不能在块级作用域之中声明,是一个相当令人混淆的问题。

ES5规定,函数只能在顶层作用域和函数作用域之中声明,不能在块级作用域声明。

// 情况一
if (true) {
  function f() {}
}

// 情况二
try {
  function f() {}
} catch(e) {
}

上面代码的两种函数声明,根据ES5的规定都是非法的。

但是,浏览器没有遵守这个规定,为了兼容以前的旧代码,还是支持在块级作用域之中声明函数,因此上面两种情况实际都能运行,不会报错。不过,“严格模式”下还是会报错。

// ES5严格模式
'use strict';
if (true) {
  function f() {}
}
// 报错

ES6 引入了块级作用域,明确允许在块级作用域之中声明函数。

// ES6严格模式
'use strict';
if (true) {
  function f() {}
}
// 不报错

ES6 规定,块级作用域之中,函数声明语句的行为类似于let,在块级作用域之外不可引用。

function f() { console.log('I am outside!'); }
(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }

  f();
}());

上面代码在 ES5 中运行,会得到“I am inside!”,因为在if内声明的函数f会被提升到函数头部,实际运行的代码如下。

// ES5版本
function f() { console.log('I am outside!'); }
(function () {
  function f() { console.log('I am inside!'); }
  if (false) {
  }
  f();
}());

ES6 的运行结果就完全不一样了,会得到“I am outside!”。因为块级作用域内声明的函数类似于let,对作用域之外没有影响,实际运行的代码如下。

// ES6版本
function f() { console.log('I am outside!'); }
(function () {
  f();
}());

很显然,这种行为差异会对老代码产生很大影响。为了减轻因此产生的不兼容问题,ES6在附录B里面规定,浏览器的实现可以不遵守上面的规定,有自己的行为方式

  • 允许在块级作用域内声明函数。
  • 函数声明类似于var,即会提升到全局作用域或函数作用域的头部。
  • 同时,函数声明还会提升到所在的块级作用域的头部。

注意,上面三条规则只对ES6的浏览器实现有效,其他环境的实现不用遵守,还是将块级作用域的函数声明当作let处理。

前面那段代码,在 Chrome 环境下运行会报错。

// ES6的浏览器环境
function f() { console.log('I am outside!'); }
(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }

  f();
}());
// Uncaught TypeError: f is not a function

上面的代码报错,是因为实际运行的是下面的代码。

// ES6的浏览器环境
function f() { console.log('I am outside!'); }
(function () {
  var f = undefined;
  if (false) {
    function f() { console.log('I am inside!'); }
  }

  f();
}());
// Uncaught TypeError: f is not a function

考虑到环境导致的行为差异太大,应该避免在块级作用域内声明函数。如果确实需要,也应该写成函数表达式,而不是函数声明语句。

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

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

另外,还有一个需要注意的地方。ES6的块级作用域允许声明函数的规则,只在使用大括号的情况下成立,如果没有使用大括号,就会报错。

// 不报错
'use strict';
if (true) {
  function f() {}
}

// 报错
'use strict';
if (true)
  function f() {}

 

 

 

© 著作权归作者所有

共有 人打赏支持
史文帝
粉丝 1
博文 24
码字总数 8566
作品 0
孝感
程序员
私信 提问
ES6常用特性

1、什么是ECMAScript6?和JavaScript什么关系? 1.1 什么是ECMAScript6? 首先说一下什么是ECMA(European Computer Manufacturers Association)欧洲计算机制造商协会。 如果说ECMA是一种组...

方千竹
2017/12/15
0
0
浅谈Javascript模块化开发

*** 自己接触过的几种javascript模块开发,由于水平有限,只能简单谈一谈。 *** 立即执行匿名函数 由于javascript的函数作用域,将模块代码放入立即执行匿名函数中,防止污染全局变量。将需要...

jackzlz
2015/08/17
0
0
针对于ECMA5Script 、ECMAScript6、TypeScript的认识

什么是ECMAScript、什么又是ECMA? Ecma国际(Ecma International)是一家国际性会员制度的信息和电信标准组织。1994年之前,名为欧洲计算机制造商协会(European Computer Manufacturers Ass...

赵_俊明
2016/07/27
895
4
常用ECMAScript6语法归纳

原文博客地址,欢迎学习交流:点击预览 声明变量 可以使用let、const关键字声明变量,而不推荐使用var声明变量 var声明变量的问题: 可以多次重复声明同一个变量名,存在覆盖的风险 在全局声明...

戎马
2018/08/27
0
0
ECMAScript6入门 学习之简介

1.什么是ECMAScript 6? ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业...

w-rain
2016/06/12
711
0

没有更多内容

加载失败,请刷新页面

加载更多

Mysql(Mariadb)数据库主从复制

Mysql主从复制的实现原理图大致如下: MySQL之间数据复制的基础是以二进制日志文件(binary log file)来实现的,一台MySQL数据库一旦启用二进制日志后,其作为master,它数据库中所有操作都...

linux-tao
48分钟前
2
0
Mysql(Mariadb)数据库主从复制

Mysql主从复制的实现原理图大致如下: MySQL之间数据复制的基础是以二进制日志文件(binary log file)来实现的,一台MySQL数据库一旦启用二进制日志后,其作为master,它数据库中所有操作都...

Linux就该这么学
今天
2
0
Mysql(Mariadb)数据库主从复制

Mysql主从复制的实现原理图大致如下: MySQL之间数据复制的基础是以二进制日志文件(binary log file)来实现的,一台MySQL数据库一旦启用二进制日志后,其作为master,它数据库中所有操作都...

xiangyunyan
今天
2
0
Android 自定义Path贝塞尔曲线View实践——旋转的花朵

一、关于贝塞尔曲线 在工业设计方面贝塞尔曲线有很多用途,同样,在Android中,贝塞尔曲线结合Path类可以实现更复杂的图形,这里我们给一个案例,来实现一种旋转的花朵。对于贝赛尔曲线的理解...

IamOkay
今天
3
0
7、redis主从复制和sentinel配置高可用

一:redis主从配置 1、环境准备 master : 192.168.50.10 6179 slave1: 192.168.50.10 6279 slave2: 192.168.50.10 6379 2、redis.conf配置文件配置 master port 6179......

刘付kin
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部