Rumah >hujung hadapan web >tutorial js >ES6中块级作用域的详细介绍(代码示例)
本篇文章给大家带来的内容是关于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
Atas ialah kandungan terperinci ES6中块级作用域的详细介绍(代码示例). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!