ES6中块级作用域的详细介绍（代码示例）

来源：动视网责编：小采时间：2020-11-27 19:27:56

ES6中块级作用域的详细介绍（代码示例）

ES6中块级作用域的详细介绍（代码示例）:本篇文章给大家带来的内容是关于ES6中块级作用域的详细介绍（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。今天，来探讨一下ES6中的块级作用域。全局作用域和函数作用域在ES5中，只全局作用域和函数作用域。这会导致函数作用

推荐度：

点击下载本文 文档为doc格式

导读ES6中块级作用域的详细介绍（代码示例）:本篇文章给大家带来的内容是关于ES6中块级作用域的详细介绍（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。今天，来探讨一下ES6中的块级作用域。全局作用域和函数作用域在ES5中，只全局作用域和函数作用域。这会导致函数作用

本篇文章给大家带来的内容是关于ES6中块级作用域的详细介绍（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

今天，来探讨一下ES6中的块级作用域。

全局作用域和函数作用域

在ES5中，只全局作用域和函数作用域。这会导致函数作用域覆盖了全局作用域；亦或者循环中的变量泄露为全局变量。

例如：

// 1.函数作用域覆盖了全局作用域,发生了变量提升，函数声明大于var声明的变量，因此函数里面的a提到了前面，在打印a，初始化一个undefined给a,所以打印出了undefined。
var a = '1';
function fn() {
 console.log(a);
 if (3<2) {
 var a = 3;
 }
}
fn(); // undefined
// 2.循环中的变量泄露为全局变量
for(var i=0;i<5;i++) {
 console.log(i);
}
console.log(i); // 5;

ES6的块级作用域

用let命令新增了块级作用域，外层作用域无法获取到内层作用域，非常安全明了。即使外层和内层都使用相同变量名，也都互不干扰。

// 1.外层作用域无法获取到内层作用域
function fn1() {
 let a = 41;
 if(1 == 1) {
 let a = 3;
 console.log(2,a); // 2 3
 }
 console.log(1,a); // 1 41
}
fn1();

{ 
 {
 let food = 'apple';
 }
 console.log(food); // Uncaught ReferenceError: food is not defined
}

{ 
 {
 let food = 'apple';
 }
 console.log(food); // Uncaught ReferenceError: food is not defined
}

// 2. 外层和内层都使用相同变量名，也都互不干扰
{ 
 {
 let food = 'apple';
 console.log(food); // apple
 }
 let food = 'orange';
 console.log(food); // orange
}

块级作用域和和函数声明

在ES5中，函数只能在顶级作用域和函数作用域中声明，不能在块级作用域中声明。但是在ES6中，函数可以在块级作用域中声明。

但是会有一定的问题，因为函数声明会被提到代码的最前面。所以会报错，最好在ES6中用函数表达式来表示一个函数。

例如：

//1.函数声明报错
{
 if (4 < 2) {
 function fn() {
 console.log('我在函数里面！');
 }
 }
}
fn(); // Uncaught TypeError: fn is not a function
//2.函数表达式没错
{
 let fa = '111';
 let fn = function () {
 console.log('我在函数里面！');
 }
 console.log(fa,fn); // 111 ? () { console.log('我在函数里面！');}
}

注意：ES6中允许函数在块级作用域中可以声明的条件是必须在大括号里面，否则就会报错。

// 1.报错的情况
if (4>2) {
 let fn = function () {};
}

//2.报错的情况
if (4>2)
 let fn = function () {}; // Uncaught SyntaxError: Lexical declaration cannot appear in a single-statement context

ES6中块级作用域的详细介绍（代码示例）

推荐度：

点击下载本文 文档为doc格式

标签：介绍代码简介

热门焦点

ES6中块级作用域的详细介绍（代码示例）

ES6中块级作用域的详细介绍（代码示例）

ES6中块级作用域的详细介绍（代码示例）

最新推荐

猜你喜欢

热门推荐