您的位置：首页 > 其它

ES6入门（一）：块级作用域

2016-10-29 12:13 253 查看

我们知道，在ES5及之前的JavaScript标准中是没有定义块级作用域的。这导致在编程时会意外地犯一些微妙的错误。例如，局部变量提升会将全局变量的定义覆盖；for循环的局部变量在循环结束后依然有效等等。ES6标准引入了块级作用域的概念，结合let关键字，可以解决上述问题。一般的用法如下：

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

这样写代码，变量的作用域更加明晰，有利于减少不必要的失误。上述代码中如果将let改为var，则输出就是10了。因为，if块内的局部变量n的声明提升到函数作用域func的顶端，覆盖了if块外的n的声明。注意，这里变量提升仍然是在某个作用域范围内的，此例中是函数func的作用域，而不会超出该作用域。这就是说，如果func外还有一个n的定义，例如：

var n = 0
function func() {
var n = 1;
if (true) {
var n = 10;
}
console.log(n); // 10
}
console.log(n); // 0

由于ES5有函数作用域的概念，func内部的变量n在该函数外就不可见了。因此，最外层的n值始终为0。下面举一个更加实际的例子，我在某个WebApp中引入了jquery库，并在自己的代码中使用$函数。同时，我又可能重新定义$函数完成想要的功能，JavaScript代码app.js如下：

let appShell = function(useMyDollar){
if(useMyDollar){
let $ = function(domElement){
let element = document.getElementsByTagName(domElement);
if(element){
return element;
}else{
throw "No such tag";
}
};

var run = function(){
let myDiv = $('div');
console.log(myDiv[0].tagName);
};
}

function initApp(){
$('.container').css('height', "100%");
}
return {
run : run,
init : initApp,
};
};
$(function(){
let app = appShell(true);
$('.container').css('width', "100%");
app.init();
app.run();
});

html代码index.html如下：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container">
Hello ES6!
</div>
</body>
</html>

在文档ready时，通过appShell函数得到一个app对象，参数为true表示我要重写$函数。在appShell函数中，新的$函数使用let关键字定义在if块中，因此只在if块内有效。当init方法执行时，$函数仍然是jQuery提供的版本。当run方法执行时，由于run的定义在if块内部，因此新的$函数对其可见。如果使用var定义新的$函数，那么新的定义会提升到appShell函数的作用域范围，执行init函数就会报错，因为新的$函数并没有css函数的定义。同时注意到，新的$函数的定义并没有提升到appShell外部，因此外部的css函数调用没有问题。

除了let外，ES6中还引入了const关键字用于声明一个常量。常量声明以后其值不能改变。const常量的作用域规则与let变量相同。值得注意的是，如果将一个对象声明为常量，只是这个对象的指向不能改变，即不能赋值为另一个对象，而对象的内容是可以改变的。除非使用Object.freeze方法声明，常量的内容也不能改变。例如我在html文件里加入以下片段：

<div class="container">
Hello ES6!
<label id="cat-name" style="margin-left:10px"></label>
<button id="change-name" style="margin-left:10px">Try to change cat's name</button>
</div>label用于显示cat name，button用于更改cat name。对应的app.js的改动如下：
const myCat = Object.freeze({
name : "July",
age : 1
});

function initApp(){
$('.container').css('height', "100%");
$('#cat-name').text(myCat.name);
$('#change-name').on('click', function(event){
myCat.name = "Circle";
//myCat = {name: "Who"}; //Uncaught TypeError: Assignment to constant variable.
$('#cat-name').text(myCat.name);
});
}由于myCat对象使用了freeze方法声明，在click事件处理器中对myCat.name的赋值操作是无效的，该属性保持不变，而在严格模式下会报错。

参考资料: ECMAScript 入门第2章： http://es6.ruanyifeng.com/#docs/let

环境：Chrome 53

代码：在这里下载。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航