ES6 (前端必学三)

一.class类（封装构造函数和原型）

类是将构造函数和原型封装在类里 ，要声明一个类，你可以使用带有class关键字的类名

constructor 是一个特殊的方法，用于初始化新创建的对象实例。当你使用new关键字创建类的实例时，constructor方法会被调用 

//声明类
class Animal{
  constructor(n){
  this.name=n;
}
eat Food(){
 console.log(this.name+"在吃东西")
}

}
创建实例
new Animal("狗").eatFood()

二.类的继承

类的继承就是子类继承父类的成员   利用extends   super  将父类的成员添加到子类的身上

//父类
class System{
        constructor(author){
          this.version='v1.0.0'
          this.author=author
        }
        showVersion(){
          console.log('当前系统版本'+this.version);
        }
      } 

//子类继承父类
class App extends System{
   constructor(author){
    super(author)
    this.name="QQ"
}
 showName(){
   console.log("应用名称"+this.name)
}
}
   

三.类的静态成员

在JavaScript中，类可以拥有静态成员，包括静态属性和静态方法。静态成员是直接在类上定义的，而不是在类的实例上定义的。这意味着你不需要创建类的实例就可以访问静态成员。通过类直接调用 

class Animal{
      // 静态属性
      static name='狮子动物'
      // 静态方法
      static showName(){
        console.log('这是'+Animal.name);
      }
    }
    // 实例
    const a1=new Animal()

    // 下面是Animal这个类直接引用或直接使用的属性和方法 叫做静态成员
    console.dir(Animal)
    console.dir(Animal.name)
    Animal.showName()

 //  私有属性
    class App{
      #color='红色'
      showColor(){
        console.log('这是'+this.#color);
      }
    }
    const app=new App()
    // 这样showColor没有值 ，在外部不出现
    console.log(app);
    // 可以使用，在内部输出
    app.showColor()
    // console.log(app.color); undefined
    // console.log(app.#color); 报错

    class Page extends App{
      constructor (){
        super()
      }
      getColor(){
        // console.log(this.#color); 报错
      }
    }
    const page =new Page()
    console.log(page);

四. 模块化

 把项目拆分成大大小小的组件，这些组件叫做模块，模块化可以按需导入 和全局导入

 在JavaScript中，模块化是一种将代码分割成独立、可复用的模块的方式。每个模块都具有   特定的功能或责任，并且可以通过特定的接口与其他模块进行交互。模块化有助于组织代   码、减少代码冗余、提高可维护性和可测试性

  导出 代码块

在一个文件夹中 把一个模块函数通过export暴露出去
export function exampleFunction() {  
  // ...  
}

 导出代码块

//通过import 把这个文件引入
//按需  需要加上小括号
import { exampleFunction } from './example';
//全局  不需要加上小括号
import Banner from './modules/banner.js'