01 es6总结介绍

1 let/const

与var的区别

let,const用于声明变量,用来替代老语法的var关键字,与var不同的是,let/const会创建一个块级作用域(通俗讲就是一个花括号内是一个新的作用域)。

对for,var声明的变量只会声明一次,而let声明的变量每次循环都会再声明一次

for (let i = 0; i < 20; i++) {
// do something
}

相当于

{
let i = 0;
// do something
}
{
let i = 1;
// do something
}
{
let i = 2;
// do something
}
...

浏览器中var变量由于自动提升,会自动被归到window对象下,下面是在浏览器中调试的结果

var a = 1;
console.log(window.a) // 1
let b = 2;
console.log(window.b) // undefined

暂时性死区

var变量会自动提升,所以在哪里都可以用,不存在死区。所以在声明之前用一个后面声明的let变量会报错。

const变量

const和let的不同之处

  1. const在初始化的时候必须赋值,在后面不能再修改。否则都会报错

  2. const变量声明的是一个引用类型,则不能改变它的内存地址

建议

拥抱let/const

1.2 箭头函数

箭头函数也function关键字函数的区别

  1. 箭头函数没有arguments

  2. 箭头函数没有prototype属性,不能用作构造函数

  3. 箭头函数没有自己的this,它的this引用的是外层上下文的this

首先正常情况下,对方方法中的this是指的当前对象

var b = {
name: 'leo',
a: function(){console.log(this.name)}
}
b.a() // leo

但是回调函数是具有全局性的,回调函数中的this是全局对象

var a = 2
let controller = {
a: 1,
makeRequest: function () {
setTimeout(function () {
console.log(this.a);
})
}
}
controller.makeRequest(); // 2

es5和es6中有两种解决办法,es5中是在回调函数之前用that来保存当前对象环境

var a = 2
let controller = {
a: 1,
makeRequest: function () {
var that = this;
setTimeout(function () {
console.log(that.a);
})
}
}
controller.makeRequest(); // 1

es6中使用箭头函数就可以解决这个问题

var a = 2
let controller = {
a: 1,
makeRequest: function () {
setTimeout(() => console.log(this.a))
}
}
controller.makeRequest(); // 1