面向对象和模块化

一、面向对象

封装？

ES5 面对对象---假的

<script>
      //以函数的形式来写对象
      //没有专门的类声明方法
      function Person(name, age) {
        //1.既是构造函数，又是类
        this.name = name;
        this.age = age;
      }
      //2.添加方法 方法独立在类之外
      Person.prototype.showName = function () {
        alert(this.name);
      };
      Person.prototype.showAge = function () {
        alert(this.age);
      };
      // let p = new Person("blue", 18);

      // p.showAge();
      // p.showName();
      // 3.没有专门的继承方法
      function Worker(name, age, job) {
        //4.从父类继承要靠骗
        Person.call(this, name, age);
        this.job = job;
      }
      Worker.prototype = new Person();//5.没有专门继承父类方法的方式
      Worker.prototype.constructor = Worker;
      Worker.prototype.showJob = function () {
        console.log(this.job);
      };
      let w = new Worker("blue", 18, "随便");
      w.showAge();
      w.showName();
      w.showJob();
    </script>

ES6 面向对象

提供了 4 个新的关键字，用于解决上面的问题

• class:类声明
• constructor:构造函数/构造器
• extends:继承
• super:超类/父类

   <script>
      //1.有单独的类声明 构造函数声明 统一化
      class Person {
        // 2.类和构造函数区分开来
        constructor(name, age) {
          this.age = age;
          this.name = name;
        }
        showName() {//3.方法在类的内部
          console.log(this.name);
        }
        showAge() {
          console.log(this.age);
        }
      }
      // 4.有专门的继承关键字
      class Worker extends Person {
        constructor(name, age, job) {
          super(name, age);//5.专门的父级调用
          this.job = job;
        }
        showJob() {//6.无需通过prototype继承
          console.log(this.job);
        }
      }
      let w = new Worker("green", 19, "随便");
      w.showName();
      w.showAge();
      w.showJob();
    </script>

二、ES6 模块系统

使用 ES6 模块

//mod1.js ---定义模块
export let a = 12;
export let b = 6;
export let c = 8;

//index.js---使用模块
import * as mod1 from "./mod1";
console.log(mod1.a, mod1.b, mod1.c);

//webpack.config.js---编译配置
const path = require("path");
module.exports = {
  mode: "development",
  entry: "./js/index.js",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js",
  },
};

详解模块语法

引入模块（import）

//引入整个模块
import * as name from "file";

//引入成员
import {export1,export2 as alias2,[...]} from "file";

//引入默认成员
import name from "file";

//运行模块代码，但不引入任何成员
import "file";

//异步引入
let promise = import("file");

注：file开头一定要有./
如：
let promise = import("./mod1");

声明模块及导出（export）

//变量
export let a = 12;
export const a = 12;

//一堆
let a,b,c=...;
export{a,b,c...};

//导出函数
export function show(){
	...
}

//导出class
export class Person{

}

默认成员
export default

#