es63块级作用域

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一种场景</title>
<script type="text/javascript">
-----------------------------------------------------------------
var a = 1;
function fn1(){
alert(a); //1
}
fn1(); var a = 1;
function fn1(){
alert(a); //undefined
if (false) {
var a = 3;
};
}
fn1();
-------------------------------------------------------------------
var a = 1;
function fn1(){
alert(a); //undefined
if (false) {
//函数执行的时候,即使这部分代码没有执行,会创建局部的var time=未定义,所以未定义,函数体中没有通过var声明的变量,会加入到全局window作用域中
var a = 2;
function fun() {//函数要执行才加入局部作用域
console.log("I am inside!");
};
};
fun();//fun is not a function,变为true就是I am inside!
}
fn1();
------------------------------------------------------------------- var a = 1;
function fn1(){
alert(a); //undefined
if (true) {
var a = 2;
function fun() {//函数要执行才加入局部作用域
console.log("I am inside!");
};
};
fun();//I am inside!
}
fn1();
</script>
</head>
<body> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一种场景</title>
<script type="text/javascript">
var string = "Hello World!"; for (var i = 0; i < string.length; i++) {
console.log(string[i]);//H e l l o W o r l d !
}; console.log("循环结束");
console.log(i); //12
</script>
</head>
<body> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块级作用域</title>
<script src="../../../vendor/traceur.js"></script>
<script src="../../../vendor/bootstrap.js"></script>
<script type="text/javascript">
console.log("ES5:"); function fun() {
var num = 100;
if (true) {
var num = 200;
};
console.log(num);
}; fun(); //200
</script>
<script type="text/traceur">
console.log("ES6:"); function fun() {
let num = 100;
if (true) {
let num = 200;
console.log(num);//200
};
console.log(num);//100
}; fun(); //100
</script>
</head>
<body> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>立即执行函数</title>
<script src="../../../vendor/traceur.js"></script>
<script src="../../../vendor/bootstrap.js"></script>
<script type="text/javascript">
console.log("ES5:");
function fun() {
console.log("I am outside!");
}; (function () {
function fun() {
console.log("I am inside!");
};
fun();//I am inside!
}());
fun();//I am outside! (function () {
if (false) {//函数不加入局部作用域
function fun() {
console.log("I am inside!");
};
};
fun();// fun is not a function
}());
fun();//I am outside! (function () {
if (true) {//加入局部作用域
function fun() {
console.log("I am inside!");
};
};
fun();// I am inside!
}());
fun();//I am outside!
</script>
<script type="text/traceur">
console.log("ES6:");
function fun() {
console.log("I am outside!");
}; (function () {
if (false) {
function fun() {//只在大括号范围内有效。es6块级作用域
console.log("I am inside!");
};
}; fun();//I am outside!
}());
fun();//I am outside!
</script>
</head>
<body> </body>
</html>
上一篇:ES6入门一:块级作用域(let&const)、spread展开、rest收集


下一篇:ECMAScript6 入门教程 初学记录let命令 块级作用域