class详解以及面向对象继承

class

抽象:抽取相似的功能，归为一类

类：专业点说法就是一组具有相同属性和行为的对象的抽象，只看这个貌似不太好理解，怎么理解这个类呢？以我们前边的代码为例，function Person 这个就是一个类，我们把拖拽所需要的常用功能都封装在这个类中，每次需要需要使用到拖拽这个功能的时候，就实例化这个类，它会给我生成 一个 drag 对象，通过该对象我们就实现了拖拽这个功能。

类：构造函数和原型的集合体

在 ES6 中，虽然有了 class 的语法，但是还是有别于传统语言(Java) 中的类。
ES6 中的类，只是语法糖(糖衣语法)

class 代码注释详解

// 声明一个类首字母大写
class Person{
	//构造器外定义的方式和构造器内定义没什么特别之处
    list= {};	//公有字段
    #el = null; //私有字段（只能在类中使用；实例是）
    //构造器
    constructor(el,option){//参数为实例时传递进来的值
    	//super();//方法是继承父级时调用传值的；继承时必须调用
        this.#el = el;
        this.start();//直接调取使用原型方法
        this.option = option;
    }
    //方法都在原型上挂载
    start(){
    	//this都指向实例
      	console.log(this.#el)
    }
  	static  move(e){      //static 静态属性(方法)(只能在类中使用；实例是调用不了的)
      
    }
    ....
}
let p = new Person('ddd','xxx');//实例化

依赖关系

class Drag {
    constructor(el){     
        this.start();
    }
    start(){
    		//...中间写其他逻辑；触发后在执行以下代码
           this.ondragstart&&this.ondragstart(e); //实例声明过就可以触发
    }  
}
{
    let box2 = document.querySelector("#box2");
    let d2 = new Drag(box2);
    //实例添加方法：里面调用后就可以执行
    d2.ondragstart = function(){
        //console.log("开始");  
    }
}

继承

// 继承
//声明一个类为Person
class Person {
	//构造器
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    //原型上方法
    say(){
        console.log(this.name);
    }
}

//Teacher 类继承 Person 
class Teacher extends Person {
    constructor(name,age){
        // 如果在子类中重新定义constructor，一定在这里调用 super（调用后并传入值；父类的构造器就接收到值了）
        super(name,age);
        this.speciality = "上班";
    }
    skill(){
        console.log("连续上班24小时");
    }
}
console.log(new Person("小明",18));
console.log(new Teacher("小红",58));

// class Teacher {
//     constructor(name,age){
//         this.name = name;
//         this.age = age;
//         this.speciality = "讲课";
//     }
//     say(){
//         console.log(this.name);
//     }
//     skill(){
//         console.log("连续上课24小时");
//     }
// }
// 继承：继承可以使得子类具有父类的属性和方法并重新定义、追加属性和方法等。

多态

// 多态

class Person {
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    say(){
        console.log(this.name);
    }
}
class Teacher extends Person {
    constructor(name,age){
        // 如果在子类中重新定义constructor，一定在这里调用 super
        super(name,age);
        this.speciality = "讲课";
    }
    say(){
        console.log(this.age);
    }
    skill(){
        console.log("连续上课24小时");
    }
}
let p = new Person("小明",18);
let p2 = new Teacher("小红",58);
p.say();
p2.say();