Web前端高级工程师培训：类及模块化应用

类及模块化应用

本节知识点

• ES6中类的使用
• ES6中继承extends、super
• ES6静态方法和属性
• ES6中模块化import、export
• 王者荣耀英雄选择案例

课堂目标

• 理解并能使用ES6中的类
• 学会使用ES6中继承
• 理解静态属性及方法
• 会使用ES6中模块化

ES6中的类

• 类的写法

  class Person{
    	height="178cm";
      constructor(name,age){
          //属性
          this.name = name;
          this.age = age;
      }
      //方法
      getName(){
          console.log("姓名是:"+this.name);
      }
  }
  let student = new Person("张三",20);
  student.getName();
  
  

• 静态方法和属性:实例不会继承的属性和方法

  class Person{
      //静态方法
      static hobby(){
          console.log("喜欢篮球");
      }
  }
  //静态属性
  Person.height = "178cm";
  //通过类来调用
  Person.hobby();
  console.log(Person.height);
  

• 私有成员 “#”符号

  class Person{
      #height = "178cm";
      constructor(name){
          this.name = name;
      }
  }
  

• 类的继承

  class Dad{
      name = "张三";
      age = 40;
      constructor(height){
          this.height = height;
      }
      hobby(){
          console.log("喜欢篮球");
      }
  }
  class Son extends Dad{
      constructor(height){
          //表示父类的构造函数
          super(height);
      }
  }
  

  • super特点
    • super只能在子类中使用，可以在constructor 及 函数或静态方法中使用
    • 不能单独使用super
    • super调用类似函数调用可以根据父类构造函数传参数
    • 如果子类中没有constructor，子类会自动调取super()且传入参数到父类
    • 子类中需要在调取super之后调用this

• 抽象基类

      class AbstractPerson{
          constructor(){
              if(new.target===AbstractPerson){
                 throw new Error("AbstractPerson 类不能被实例化");
              }
          }
      }
      class Person extends AbstractPerson{
  
      }
      let zhangsan = new Person();
  

面试题相关

• 小贤是一条可爱的小狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会乖乖叫 一声(yelp)。从这段描述可以得到以下对象:

  class Dog{
     wow(){
         alert("wow");
     }
     yelp(){
         this.wow();
     }
  }
  

  小芒和小贤一样，原来也是一条可爱的小狗，可是突然有一天疯了(MadDog)，一看到 人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述，按示例的形式用代码来实现。

• 如何实现链式调用？

• __proto__ 和 prototype 之前有什么关系？

ESM(es6模块化)

• 浏览器默认模块化 script 里加入 “type=module”；

• 导出 关键字 export

  • 导出 方式一 ：

    export { a ,b , c};
    

  • 导出方式二 关键字 “as”

    export { a as aa ,b , c};
    

  • 导出方式三

    export let c = ()=>{console.log("I am function...")};
    

  • 导出方式四

    export default a;
    

    • 等同

    export {a as default};
    

  • export 可以导出多个，export default 只能导出一个；

• 导入方式：关键字 import

  • export导出的,命名要保持一致

    import {aa , b , c} from './moduleb.js';
    

  • export导出的，命名可以自定义；

    import myfn from './moduleb.js';
    

  • 通配符 "*"方式导入

    import * as obj from './moduleb.js';
    

• 按需导入（延迟导入）

​ import 方法；

document.onclick =async function(){
    // import {fn1} from  './fn.js';
    let res = await import("./fn.js");
    console.log(res);
}

王者荣耀选择英雄案例

• 抽象玩家类
• 抽象英雄类
• 抽象技能类
• 抽象游戏管理类
• 模块化分各类
• 扩展英雄及技能
• 亚瑟
  • 契约之盾
  • 回旋打击
  • 圣剑裁决
• 鲁班
  • 河豚手雷 S11210
  • 无敌鲨嘴炮S11220
  • 空中支援 S11230

课程总结

• 面向对象及面向过程编程

• ES6中类的使用

• ES6中继承extends、super

• ES6静态方法和属性

• ES6中模块化import、export

下节预告

• 前端常用设计模式