蚂蚁部落

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 364|回复: 0

ES2015 let命令

[复制链接]
发表于 2016-5-6 14:46:19 | 显示全部楼层 |阅读模式
本帖最后由 antzone 于 2016-5-8 00:56 编辑

ES2015 let命令:
关于块级作用域可以参阅ES2015 块级作用域简单介绍一章节。
ES2015新增let命令用来声明变量,使用方式与var类似,但区别也是巨大的。
一.let命令创建块级作用域:
使用let声明的变量只在变量声明时所在的代码块内有效。
[JavaScript] 纯文本查看 复制代码运行代码
if (true) {
  let url = "www.softwhy.com";
}
console.log(url);

上面的代码会报错,因为变量url只在它声明时所在的代码块中有效。
[JavaScript] 纯文本查看 复制代码运行代码
if (true) {
  var url = "www.softwhy.com";
}
console.log(url);

使用var声明变量,则可以正常输出。
二.不存在变量提升现象:
使用let声明的变量不存在提升现象,看一段代码实例:
[JavaScript] 纯文本查看 复制代码运行代码
console.log(webName);
var webName= "蚂蚁部落";
console.log(webName);

第一次会输出undefined,因为在预编译器,使用var声明变量会提升,但是这时候并没有赋值。
[JavaScript] 纯文本查看 复制代码运行代码
console.log(url);
let url = "www.softwhy.com";

代码会报错,let声明变量并没有提升现象,也就是说使用let声明的变量必须先声明再使用,再来看一段代码:
[JavaScript] 纯文本查看 复制代码运行代码
console.log(typeof url);

变量url并没有声明,输出值是undefined。
[JavaScript] 纯文本查看 复制代码运行代码
console.log(typeof url);
let url = "www.softwhy.com";

上面的代码会报错,因为在let声明变量之前就使用了变量。
三.temporal dead zone:
在块级作用域内,如果一个变量使用let声明,那么此变量就会被封闭在当前作用域内,不再受外部作用域的影响。
[JavaScript] 纯文本查看 复制代码运行代码
var url = "www.softwhy.com";
function func() {
  console.log(url);
  let url = 1;
}
func()

代码会报错,因为函数作用域内,使用let声明了变量url,那么url就会被封闭在当前作用域中,不再受外部作用域的影响。
又因为在声明之前使用变量,所以报错。再来看一段代码实例:
[JavaScript] 纯文本查看 复制代码运行代码
var url = "www.softwhy.com";
if (true) {
  console.log(url);
  let url;
}

上面的代码也会报错,同样的道理。
所以temporal dead zone指的就是在一个作用域内,let声明变量之前的这块区域,如果在这块区域内使用变量会报错。
四.let不允许在同一作用域重复声明变量:
不能使用let命令在同一作用域重复声明变量,代码实例:
[JavaScript] 纯文本查看 复制代码运行代码
let url = "www.softwhy.com";
if (true) {
  let url="softwhy.com";
  console.log(url);
}

在不同的作用域,重复声明变量是没问题的。
[JavaScript] 纯文本查看 复制代码运行代码
if (true) {
  let url = "www.softwhy.com";
  let url="softwhy.com";
  console.log(url);
}

在同一作用域内,使用let重复声明变量会报错。
五.函数的声明注意事项:
在ES5严格模式下,函数声明只能存在于全局作用域和函数作用,在类似if语句这样的块中声明会报错。
代码实例如下:
[JavaScript] 纯文本查看 复制代码运行代码
"use strict";
if (true) {
  function func() {
    //code
  }
}

上面的代码会报错。但是在ES2015中不会,因为会解读为函数在块级作用域内声明,但是这时候,if后面的大括号不能够省略。
六.全局属性:
在全局作用域使用var声明的变量,也是全局属性,代码实例如下:
[JavaScript] 纯文本查看 复制代码运行代码
var antzone = "蚂蚁部落";
console.log(window.antzone);

但是使用let声明的变量并非如此,代码实例如下:
[JavaScript] 纯文本查看 复制代码运行代码
let url = "softwhy.com";
console.log(window.url);

七.块级作用域的应用实例:
下面通过一个简单的代码实例,演示一下块级作用域的使用。
通过for循环批量为li元素注册click事件处理函数,点击li元素会显示对应的索引值。
[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  var lis = document.getElementsByTagName("li");
  var odiv = document.getElementById("antzone");
  for (var index = 0; index < lis.length; index++) {
    lis[index].index = index;
    lis[index].onclick = function () {
      odiv.innerHTML = this.index;
    }
  }
}
</script>
</head>
<body>
<div id="antzone"></div>
<ul>
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
</ul>
</body>
</html>

var声明变量不会产生块级作用域,for循环完毕之后,index值最终是4,所以通过在li元素上自定义一个index属性来存储当前元素的索引的方式来实现我们的要求,当然也可以采用闭包的方式。如果采用let声明,那么就方便多了,代码如下:
[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  var lis = document.getElementsByTagName("li");
  var odiv = document.getElementById("antzone");
  for (let index = 0; index < lis.length; index++) {
    lis[index].onclick = function () {
      odiv.innerHTML = index;
    }
  }
}
</script>
</head>
<body>
<div id="antzone"></div>
<ul>
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
</ul>
</body>
</html>

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复返回顶部 返回列表