ES6学习笔记 II

模块化

模块化.png

注意：模块化需要放到服务器环境
使用模块化：<script type="module"><script>

定义模块化如下

• export
• export const a = 12
• export {a as aaa,b as bb}

使用模块化如下

• import
• import './modules/a.js'
• import {a as a,b,c} from './modules/a.js'
• import * as obj from './modules/a.js'

import特点：

• import 可以是相对路径，也可以是绝对路径
• import 模块只会导入一次，无论引入多少次
• import './modules/a.js'，这么用相当于引入文件
• 有提升效果，import 会自动提升到顶部，首先执行
• 导出去模块内容，如果里面有定时器更改，外面也会改动，不像Common规范缓存

import()方法 类似node里面require()方法，可以动态引入，默认import语法不能写到if之类里面。此方法返回值是一个promise对象。

import('./modules/a.js').then(res => {
  console.log(res);
})

优点：1、按需加载，2、可以写if中，3、路径也可以动态

类（class）和继承

class Preson {
  constructor(name,age){ //构造方法（函数），调用new自动执行
    this.name = name;
    this.age = age;
    //console.log(`我的名字是${name},我的年龄是${age}`)
  }
  showA(){return `名字为：${this.name}`}
   showB(){return `年龄为：${this.age}`}
}
let p = new Preson('es6',15);
console.log(p.showA(),p.showB());//名字为：es6,年龄为：15

注意：1、ES6里面class没有提升功能，在ES5用函数模拟的话默认函数提升
2、ES6里面this比之前轻松多（单独使用类里面的函数就要注意this的指向，最好是用bind(this)绑定，或者写箭头函数）

静态方法：就是类身上的方法，加上static关键字就表示这个方法不会被实例继承，是通过类自身调用。

父类的静态方法可以被子类继承。

class Foo {
  static classMethod() {
    return 'hello';
  }
}
Foo.classMethod() // 'hello'
var foo = new Foo();
foo.classMethod()
// TypeError: foo.classMethod is not a function

类的继承:用到extends关键字

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 调用父类的constructor(x, y)
    this.color = color;
  }

  toString() {
    return this.color + ' ' + super.toString(); // 调用父类的toString()
  }
}

async/await

async函数返回一个Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

// 函数声明
async function foo() {}

// 函数表达式
const foo = async function () {};

// 对象的方法
let obj = { async foo() {} };
obj.foo().then(...)

// Class 的方法
class Storage {
  constructor() {
    this.cachePromise = caches.open('avatars');
  }

  async getAvatar(name) {
    const cache = await this.cachePromise;
    return cache.match(`/avatars/${name}.jpg`);
  }
}

const storage = new Storage();
storage.getAvatar('jake').then(…);

// 箭头函数
const foo = async () => {};

async函数返回一个Promise 对象。async函数内部return语句返回的值，会成为then方法回调函数的参数。
await命令后面的Promise对象，运行结果可能是rejected，所以最好把await命令放在try...catch代码块中。

//多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发。这样就会缩短程序的执行时间。
// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);

// 写法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;