看了阮一峰老师的《ECMAScript 6 入门》之后根据自己的理解添加了一些自己的例子
let和const#
1. let###
- 作用范围
let所定义的变量只在自己的作用域块内有效
{
let a = 'index';
console.log(a);
}
console.log(a); //Uncaught ReferenceError: a is not defined;
代码就会报ReferenceError(引用错误)：因为let只在大括号所包裹的大括号的块级作用域生效，对全局作用域不生效
一个最常见的闭包的例子：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div
{
width: 200px;
height: 200px;
border: 1px solid blue;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
</html>
<script>
// 需求：点击div输出每个div对应的数字
var divEle = document.querySelectorAll('div');
for (var i = 0; i < divEle.length; i++) {
(function (i) {
divEle[i].onclick = function()
{
console.log(i + 1);
}
})(i);
}
</script>
这是一个简单的前端的闭包的例子的体现，如果用到es6，一切将会变的很简单,只需要将js代码改成下面这样就可以实现我们需求的效果
var divEle = document.querySelectorAll('div');
for (let i = 0; i < divEle.length; i++) {
divEle[i].onclick = function () {
console.log(i + 1);
}
}
因为let的作用范围是在自己当前所在的块级作用域，而每一次循环的时候，let
在chorme的控制台的我们可以打断点调试就可以看到每一次循环的时候变量的变化，帮助我们理解
- 变量提升
变量提升我一开始接触的时候感觉很懵，实在是不能理解为什么我在代码声明的之前就已经已经被声明过 了，如果按照我们常规的逻辑是讲不通的，经过自己的查资料发现js虽然是一种不编译的语言，但是他在执行之前还是有一个简单的编译(不应该说是编译，而是一系列的变量对象的创建和执行)过程：
function test ()
{
var a = 'abc';
function b()
{
console.log('这是一些简单的测试代码');
}
}
test();
调用test的时候，会首先创建变量对象，形式大概如下：
{
arguments : {...},//包含传入的参数，callee等方法
b : '',//函数b的引用地址,如果控制台查看的话是函数b本身
a : undefined
}
创建变量对象的时候函数是不执行的，变量对象的属性是不可访问的，变量对象创建完之后才函数开始执行，变量对象变为活动对象，内部的属性可以访问，a开始赋值为'abc',产生了变量提升的现象。
但是let不存在变量提升的问题：
console.log(a);//undefined
var a = 123;
console.log(b);//Uncaught ReferenceError: b is not defined
let = 456;
我们发现let声明的变量在声明之前使用的话是会报错的，而var声明的变量是不会报错的。
- 块级作用域和函数声明
es5规定函数只能在顶层作用域和函数作用域中进行声明，不能在块级作用域中进行声明：
if(true) {
function f () {
console.log('es5中的函数声明');
}
}
但是es5浏览器没有遵循这个规定，仍然可以运行，不会报错，es6的规则的浏览器会报错，但是按照es6的规则去研究的话这些代码可以执行的，报错的原因是是因为浏览器有也有自己的行为方式（参考阮一峰老师ECMAScript 6 入门）：
- 允许在块级作用域声明函数
- 函数声明类似于var，即会提升到全局作用域或函数作用域的头部。(会有类似于变量提升的存在)
- 同时，函数声明还会提升到所在的块级作用域的头部。（也就是函数的具体的赋值）
2. const###
- const声明的是一个不可以改变的常量，如果尝试改变const声明的变量的值就会报错，
- 跟let一样只在自己的块级作用域内有效，不可以重新赋值
- 如果声明的是对象或者数组类型的话，不可以改变的只是对象或者数组的引用地址，也就是说可以改变对 象或者数组内部的属性和值，但是不能改变const声明变量的引用
- 全局作用域用let或者const声明的变量不再和window的属性有关系
var a = '123';
let b = '456';
const c = '789';
window.a == a;//true
window.b == b;//false
window.c == c;//false
网友评论