viviier

ES6 使用教程

let, const

let

声明带有块级作用域的变量

1
2
3
4
5
for(var i=0; i<5; i++) {
setTimeout(function(){
console.log(i) //5 5 5 5 5
}, 2000)
}

我们想在2s后输出0, 1, 2, 3, 4,,可输出的结果却不是这样。这是因为var声明循环变量泄漏为全局变量。每一次循环,新的i值都会覆盖旧值,导致最后输出的是最后一轮的i值。
使用let 就可以很好的解决这个问题。

1
2
3
4
5
for(let i=0; i<5; i++) {
setTimeout(function(){
console.log(i) // 0 1 2 3 4
}, 2000)
}

当然我们也可以用闭包来解决。

1
2
3
4
5
for(var i=0; i<5; i++) {
setTimeout((function(i){
console.log(i)
})(i), 2000)
}

const

声明带有块级作用域且不可修改的常量

1
2
3
const PI = Math.PI
PI = 23 //SyntaxError

一旦尝试修改const声明的常量,浏览器就会报错。

class, extends, super

原型、构造函数、继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class Nico {
constructor() {
this.name = 'nico'
}
say(say) {
console.log(`${this.name} say ${say}`)
}
}
var nico = new Nico()
nico.say('nihaoa')
class Kotori extends Nico {
constructor() {
super()
this.name = 'kotori'
}
}
var kotori = new Kotori()
kotori.say('nihaoa')

首先用class定义了一个’类’,通过constructor构造方法,this代表着实例对象。constructor内定义的方法和属性是实例对象自己的而constructor外定义的方法和属性则是所有实例对象可以共享的。

Class之间可以通过extends实现继承。

Sper代指父类的实例(即父类的this对象)。如果不调用super方法,子类就得不到this对象。因为子类没有自己的this对象,而是继承父类的this对象。所以子类必须在constructor中调用super方法,然后对其进行加工。

ES6的继承机制,是先创造父类的实例对象this(所以必须调用super方法),然后再用子类的构造函数修改this。

arrow function

解决this的指向问题。箭头函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
class Animal {
constructor(){
this.type = 'animal'
}
says(say) { // Animal.says
setTimeout(function() {
console.log(this.type + 'say' + say) // undefind say nico
},1000)
}
}
var animal = new Animal()
animal.says('nico')

我们想在调用says方法的时候输出animal say nico,可是结果却不对。这是因为setTimeout中的this指向的是全局对象。
我们可以用传统的两种方法来解决这个问题。第一种: 把this传给self,再用self代指this

1
2
3
4
5
says(say) {
let self = this
setTimeout(function() {
console.log(self.type)
}, 2000)

第二种:使用bind

{
1
2
3
setTimeout(function() {
console.log(this.type)
}.bind(this), 2000)

但是这样太麻烦,使用箭头函数就可以免去这些麻烦的来解决这个问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
class Animal {
constructor(){
this.type = 'animal'
}
says(say) {
setTimeout( ()=> {
console.log(this.type + 'say' + say)
},1000)
}
}
var animal = new Animal()
animal.says('nico')

当我们使用箭头函数的时候,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。并不是箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,它的this是继承外面的,因此内部的this就是外层代码块的this。

template string

用`反引号来标识起始,用${}来引用变量,所有的空格和缩进都会被保留在输出之中。

destructuring

从数组和对象中提取值,对变量进行赋值,这被称之为解构(Destructuring)。

看下面的例子:

1
2
3
let cat = 'cat'
let dog = 'dog'
let zoo = { cat:cat, dog: dog }

用ES6完全可以像下面这么写:

1
2
3
let cat = 'cat'
let dog = 'dog'
let zoo = { cat, dog } // zoo.cat = cat, zoo.dog = dog

反过来可以这么写:

1
2
let dog = { type: 'animal', many: 2 }
let { type, many } = dog // type = dog.type, many = dog.many

default, rest

default

更方便的指定默认值。

1
2
3
function animal(type = 'cat') {
console.log(type)
}

rest

1
2
3
4
function animals(...types) {
console.log(types)
}
animals('nico', 'nino', 'arashi') // ['nico', 'nino', 'arashi']

如果不用ES6的话,我们则需要使用ES5 的arguments。

------本文结束感谢阅读------