es6 面向对象

es6 的面向对象相对于传统 js 面向对象方便了很多

不需要用 function 来创建一个类

和 java 类似

1
2
3
4
5
6
class 对象名 {
  Constructor() {
    这里写属性;
  }
  这里写函数;
}

image

es6 的继承

Es6 通过 super 来继承父类的属性

父类的方法通过 extends 来继承

image

image

es6 面向对象的 this

js 的 this 容易被改变，这里本来应该显示 blue 的，但 this 现在指向了 document

image

修改的方法是在对象的方法后面，跟上一个 bind（blue）

这里修改成 blue.showName.bind(blue)

bind 是强制改变 this 的指向

bind 的可以修改 this 指向的对象

和 js 的 call 这个方法类似

箭头函数和普通函数的区别

箭头函数：根据我所在的环境，环境是谁 this 就是谁

image

这里别的实例对象用这个方法的时候，就不需要要用 bind 来改变指向了，这里 this 处在哪个环境，this 就是谁

image

普通函数：谁在调用 this，this 就是谁

上一节点击事件的错误就是因为是普通函数的缘故，this 指向了 document。

Promise 对象

拥有同步的简便，和异步的优点

有两个参数 resolve 和 reject

resolve：成功之后调用的函数

reject：失败之后调用的函数

image

promise 这个对象里面能执行一些方法和语句，执行完成后，resolve 和 reject 都会将括号里的值返回出去

promise 有局限性

  1. promise 有用-解除异步操作
  2. 有局限-带逻辑的异步操作很麻烦

promise-

promise-race(||的作用)

promise-all(&&的作用)

能获取多个地址的数据

image

Promise.all([pro 对象 1，pro 对象 2……]).then()

all 能获取 promise 的集合，可以用数组的形式将这三个对象存起来

image

因为 jQuery 的 Ajax 返回的对象里面，带有 Promise，所以这里 all 里面的对象可以直接用 jQuery 的 Ajax 表达式来使用

image

回调

回调：有结果之后来找你

  1. 不是定义的人调用
  2. 什么时候调用不知道

轮询：一直询问

generator 函数

Function *show(){}

函数名前面加一个*号

gen 函数与普通函数的区别是能暂停

并且用 yield 来分块

image

这儿已经被分成两块了

gen 函数直接使用不会生效，而是会产生一个返回值,这里将 show 这个对象给了 fan

image

要执行 show 里面的语句，需要用 next 这个方法来驱动

next 会在 yield 之前停下，如果要执行 yield 后面的语句，需要在调用一下 next 的方法

这样的好处是，有些异步操作需要时间，然后可以使用 yield 来分块，当异步操作执行完毕后，在执行后面的语句

image