ES6

模块化的使用和编译环境

export import babel webpack rollup

语法：import export（注意有无 default）
环境：babel 编译 ES6 语法，模块化可用 webpack 和 rollup

Class 和 JS 构造函数的区别

Class 在语法上更加贴合面向对象的写法

Class 实现继承更加易读、易理解

更易于写 java 等后端语言的使用

本质还是语法糖，使用 prototype

Js 构造函数

// 基础语法
function MathHandle(x, y) {
  this.x = x
  this.y = y
}
MathHandle.prototype.add = function() {
  return this.x + this.y
}
var m = new MathHandle(1, 2)
console.log(m.add()) // 3

// 继承
function Animal() {
  this.eat = function() {
    console.log('animal eat')
  }
}
function Dog() {
  this.bark = function() {
    console.log('dog bark')
  }
}
// 绑定原型，实现继承
Dog.prototype = new Animal()
var hashiqi = new Dog()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

Class

// 基本语法
class MathHandle {
  constructor(x, y) {
    this.x = x
    this.y = y
  }

  add() {
    return this.x + this.y
  }
}
const m = new MathHandle(1, 2)
console.log(m.add()) // 3

typeof MathHandle // 'function'
MathHandle.prototype.constructor === MathHandle // true
m.__proto__ === MathHandle.prototype // true

// 继承
class Animal {
  constructor(name) {
    this.name = name
  }
  eat() {
    console.log(`${this.name} eat`)
  }
}
class Dog extends Animal {
  constructor(name) {
    super(name)
    this.name = name
  }
  say() {
    console.log(`${this.name} say`)
  }
}
const dog = new Dog('哈士奇')
dog.say()
dog.eat()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

Promise

new Promise 实例，而且要 return

new Promise 时要传入函数，函数有 resolve reject 两个参数

成功时执行 resolve() 失败时执行 reject()

then 监听结果

Callback(Promise 未出现之前)

function loadImg(src, callback, fail) {
  var img = document.createElement('img')
  img.onload = function() {
    callback(img)
  }
  img.onerror = function() {
    fail()
  }
  img.src = src
}

var src = ''
loadImg(
  src,
  function(img) {
    console.log(img.width)
  },
  function() {
    console.log('failed')
  }
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Promise 基本语法

function loadImg() {
  const promise = new Promise(function(resolve, reject) {
    var img = document.createElement('img')
    img.onload = function() {
      callback(img)
    }
    img.onerror = function() {
      fail()
    }
    img.src = src
  })
  return promise
}
var src = ''
var result = loadImg(src)

result.then(
  function(img) {
    console.log(img.width)
  },
  function() {
    console.log('failed')
  }
)

result.then(function(img) {
  console.log(img.height)
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

let/const

// JS
var i = 10
i = 100
var j = 20
j = 200

// ES6
let i = 10
i = 100
const j = 20
j = 200

1
2
3
4
5
6
7
8
9
10
11

多行字符串/模板变量

// JS
var name = 'zhangshan',
  age = 20,
  html = ''
html += '<div>'
html += ' <p>' + name + '</p>'
html += ' <p>' + age + '</p>'
html += '</div>'

// ES6
const name = 'zhangshan',
  age = 20
const html = `<div>
                <p>${name}</p>
                <p>${age}</p>
            </div>`
console.log(html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

解构赋值

// JS
var obj = { a: 100, b: 200 }
var a = obj.a
var b = obj.b

var arr = ['xxx', 'yyy', 'zzz']
var x = arr[0]

// ES6
const obj = { a: 10, b: 20, c: 30 }
const { a, c } = obj

const arr = ['xxx', 'yyy', 'zzz']
const [x, y, z] = arr

1
2
3
4
5
6
7
8
9
10
11
12
13
14

块级作用域

// JS
var obj = { a: 100, b: 200 }
for (var item in obj) {
  console.log(item)
}
console.log(item) // 'b'

// ES6
const obj = { a: 100, b: 200 }
for (let item in obj) {
  console.log(item)
}
console.log(item) // 'undefined'

1
2
3
4
5
6
7
8
9
10
11
12
13

函数默认参数

// JS
function a(b) {
  if (b == null) {
    b = 0
  }
}

// ES6
function a(b = 0) {}

1
2
3
4
5
6
7
8
9

箭头函数

// JS
var arr = [1, 2, 3]
arr.map(function(item) {
  return item + 1
})

// ES6
const arr = [1, 2, 3]
arr.map(item => item + 1)
arr.map((item, index) => {
  console.log(index)
  return item + 1
})

// this 指向
function fn() {
  console.log('real', this) // {a: 100}
  var arr = [1, 2, 3]
  //  普通JS
  arr.map(function(item) {
    console.log('js', this) // window
    return item + 1
  })
  // 箭头函数
  arr.map(item => {
    console.log('es6', this) // {a: 100}
    return item + 1
  })
}
fn.call({ a: 100 })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# ES6

# 模块化的使用和编译环境

# Class 和 JS 构造函数的区别

# Js 构造函数

# Class

# Promise

# Callback(Promise 未出现之前)

# Promise 基本语法

# let/const

# 多行字符串/模板变量

# 解构赋值

# 块级作用域

# 函数默认参数

# 箭头函数

ES6