一.Babel转换器
Babel 转码器,能将ES6代码转换成ES5。例如:
// 转码前input.map(item => item + 1);
// 转码后input.map(function (item) {
return item + 1;});
babel=browser.js可以通过进入browser.js的方式转换代码。
二.为什么需要块级作用域?
ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。
第一种场景,内层变量可能会覆盖外层变量。
var tmp = new Date();
function f() {
console.log(tmp);
if (false) {
var tmp = 'hello world';
}}
f(); // undefined
解释:if代码块的外部使用外层的tmp变量,内部使用内层的tmp变量。但是,函数f执行后,输出结果为undefined,原因在于变量提升,导致内层的tmp变量覆盖了外层的tmp变量。
第二种场景,用来计数的循环变量泄露为全局变量。
var s = 'hello';
for (var i = 0; i < s.length; i++) {
console.log(s[i]);
}
console.log(i); // 5
解释:变量i只用来控制循环,但是循环结束后,它并没有消失,泄露成了全局变量。
三.块级作用域与函数声明
ES5 规定,函数只能在顶层作用域和函数作用域之中声明,不能在块级作用域声明。ES6可以。
// 情况一if (true) {
function f() {}}
// 情况二try {
function f() {}} catch(e) {
// ...}
根据 ES5 的规定都是非法的。但是,浏览器没有遵守这个规定,为了兼容以前的旧代码,还是支持在块级作用域之中声明函数,因此上面两种情况实际都能运行,不会报错。
function f() { console.log('I am outside!'); }
(function () {
if (false) {
// 重复声明一次函数f
function f() { console.log('I am inside!'); }
}
f();
}());
上面代码在 ES5 中运行,会得到“I am inside!”,因为在if
内声明的函数f
会被提升到函数头部,实际运行的代码如下:
// ES5 环境
function f() { console.log('I am outside!'); }
(function () {
function f() { console.log('I am inside!'); }
if (false) {
}
f();
}());
ES6 就完全不一样了,理论上会得到“I am outside!”。因为块级作用域内声明的函数类似于let
,对作用域之外没有影响。但是,如果你真的在 ES6 浏览器中运行一下上面的代码,是会报错的,这是为什么呢?ES6:
- 允许在块级作用域内声明函数。
- 函数声明类似于
var
,即会提升到全局作用域或函数作用域的头部。 - 同时,函数声明还会提升到所在的块级作用域的头部。
根据这三条规则,在浏览器的 ES6 环境中,块级作用域内声明的函数,行为类似于var
声明的变量。
// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }
(function () {
if (false) {
// 重复声明一次函数f
function f() { console.log('I am inside!'); }
}
f();
}());
// Uncaught TypeError: f is not a function
考虑到环境导致的行为差异太大,应该避免在块级作用域内声明函数。如果确实需要,也应该写成函数表达式,而不是函数声明语句。
// 函数声明语句
{
let a = 'secret';
function f() {
return a;
}
}
// 函数表达式
{
let a = 'secret';
let f = function () {
return a;
};
}
另外,还有一个需要注意的地方。ES6 的块级作用域允许声明函数的规则,只在使用大括号的情况下成立,如果没有使用大括号,就会报错。
// 不报错
'use strict';
if (true) {
function f() {}
}
// 报错
'use strict';
if (true)
function f() {}
四.ES6声明变量的6种方法
var声明的局限性:
(1)可以重复声明
(2)无法限制修改
(3)没有块级作用域
ES5 只有两种声明变量的方法:var命令和function命令。ES6 除了添加let和const命令,另外两种声明变量的方法:import命令和class命令。所以,ES6 一共有 6 种声明变量的方法。
五.let命令
报错:undefined定义变量但没赋值 referenceError变量没定义
ES5没有块级作用域 let实际上为 JavaScript 新增了块级作用域。
1.let声明的变量只在它所在的代码块内有效
{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
for循环的计数器,就很合适使用let命令。
for (let i = 0; i < 10; i++) {
// ...}
console.log(i);
// ReferenceError: i is not defined
例:
var a = [];for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};}
a[6](); // 10
var a = [];for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};}
a[6](); // 6
解释:变量i是var命令声明的,在全局范围内都有效,所以全局只有一个变量i。每一次循环,变量i的值都会发生改变,而循环内被赋给数组a的函数内部的console.log(i),里面的i指向的就是全局的i。也就是说,所有数组a的成员里面的i,指向的都是同一个i,导致运行时输出的是最后一轮的i的值,也就是 10。如果使用let,声明的变量仅在块级作用域内有效,最后输出的是 6。
2.不存在变量提升(let、const语句不存在变量提升,主要是为了减少运行时错误)
// var 的情况console.log(foo); // 输出undefinedvar foo = 2;
// let 的情况console.log(bar); // 报错ReferenceErrorlet bar = 2;
3.暂时性死区(在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”)
var tmp = 123;
if (true) {
tmp = 'abc'; // ReferenceError
let tmp;
}
4.不允许重复声明(let不允许在相同作用域内,重复声明同一个变量。)
// 报错function func() {
let a = 10;
var a = 1;
}
// 报错function func() {
let a = 10;
let a = 1;
}
function func(arg) {
let arg; // 报错
}
function func(arg) {
{
let arg; // 不报错
}
六.const命令
1.const声明一个只读的常量。一旦声明,常量的值就不能改变。
2.const一旦声明变量,就必须立即初始化,不能留到以后赋值。
3.只在声明所在的块级作用域内有效。const命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。const声明的常量,也与let一样不可重复声明。
七.顶层对象属性
顶层对象,在浏览器环境指的是window对象。顶层对象的属性与全局变量是等价的。
window.a = 1;
a // 1
a = 2;
window.a // 2
ES6 为了改变这一点,一方面规定,为了保持兼容性,var命令和function命令声明的全局变量,依旧是顶层对象的属性;另一方面规定,let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性。也就是说,从 ES6 开始,全局变量将逐步与顶层对象的属性脱钩。
var tmp =new Date();