【ES6】类

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
权限系统-商城
个人博客地址

一、类和实例

1. 类是用于创建对象的模板。例如：定义 Animal 类来表示动物，但它不代表任何具体是哪一个动物。类本身也是一种类型。JS中的类建立在原型上。
2. 实例是根据类创建的对象。例如：根据 Animal 类可以创建出 Tom(汤姆猫) Pike(派克狗) Peppa(佩奇猪) 等具体的某个动物实例，这些实例都属于 Animal 类型。

二、定义类的方式

1. 类声明
   在ES6中，类的声明用到 class 关键字。与函数声明不同，类声明不会提升，所以类被访问之前一定得先声明。

   class Animal {
       constructor(aNum, aName, aSex) {
           this.aNum = aNum;
           this.aName = aName;
           this.aSex = aSex;
       }
   }
   
   let tomCat = new Animal("001", "汤姆猫", "公");
   let peppaPig = new Animal("002", "佩奇猪", "母");
   

2. 类表达式
   类表达式是定义类的另一种方法。类表达式可以命名或不命名。命名类表达式的名称是该类体的局部名称。

   // 匿名类
   let Animal = class {
       constructor(aNum, aName, aSex) {
           this.aNum = aNum;
           this.aName = aName;
           this.aSex = aSex;
       }
   }
   // 通过类的 name 属性检索
   console.log(Animal.name);// Animal
   
   
   // 命名类
   let Animal = class Animal2{
       constructor(aNum, aName, aSex) {
           this.aNum = aNum;
           this.aName = aName;
           this.aSex = aSex;
       }
   }
   console.log(Animal.name);// Animal2
   

   class 定义的类主体，默认在严格模式下执行。
   类主体中可以定义如：构造函数、静态属性和方法、原型属性和方法、getter\setter、私有属性和方法等

三、构造函数

四、原型方法和属性

五、实例方法和属性

六、公有字段和私有字段

七、继承

ES6 中通过关键字 extends 实现子类对基类（父类）的继承。

// 定义一个类
class People {
    // 类中定义属性不需要let var const 这样的关键字
    // 静态属性（当前类调用）
    static descript = "人（学名：Homo sapiens），是一种灵长目人科人属的物种。"
    // 普通属性（原型上）
    localProp = "语言的本能！"

    // 构造函数
    constructor(name, age) {
        // 实例化对象属性和函数（每一个实例化都会生成属于自己的一份）
        this.name = name;
        this.age = age;
        this.sayMsg = function (msg) {
            return msg;
        }
    }

    // 普通函数（原型函数，原型链上的唯一函数，不随着实例化生成而单独生成）
    study(arg) {
        return `学习是人类的本能！，正在学习${arg}这门课程！`
    }
}

// 通过关键字 extends 实现类的继承
class Student extends People {
    // 定义私有属性（只能在类的内部使用，类外无法调用私有属性。）
    #privateProp;
    #pp = "私有属性"

    constructor(name, age, level) {
        // 通过 super() 继承父类中的属性
        super(name, age)

        this.level = level;
        this.#privateProp = "私有属性";
    }
	
	// 重新定义study函数
	study() {
		// 通过 super 关键字用于调用对象的父对象上的函数。
		super.study()
		return "子类中自己的study"
	}
}

// 实例化对象
let stu = new Student("张三", 23, "五年级");

注意：类不能继承常规对象（常规对象是不可构造的）。

八、 Mix-ins / 混入

抽象子类或者 mix-ins 是类的模板。一个 ECMAScript 类只能有一个单超类，所以想要从工具类来多重继承的行为是不可能的。子类继承的只能是父类提供的功能性。因此，例如，从工具类的多重继承是不可能的。该功能必须由超类提供。
一个以超类作为输入的函数和一个继承该超类的子类作为输出可以用于在 ECMAScript 中实现混合：

var calculatorMixin = Base => class extends Base {
  calc() { }
};

var randomizerMixin = Base => class extends Base {
  randomize() { }
};

使用 mix-ins 的类可以像下面这样写：

class Foo { }
class Bar extends calculatorMixin(randomizerMixin(Foo)) { }

---

关注公众号：前端知识分享喵，获取前端学习资料