前端：JavaScript 实现类

1. Es6-类-class

类是创建对象的模板，用代码封装数据以处理该数据，js中的类建立在原型上。

如何定义类，首先需要关键字 class，之后紧跟着类名，类名首字母需要大写，最后是需要写上大括号。
定义公有属性，直接在类下的大括号下添加对应的变量名即可，可以为变量名设置默认值。

// 类名首字母大写
class 类名{
	公有属性变量
	constructor(arg1){
		this.公有属性变量 = arg1
	}
	// 构造方法
	方法名(){
		// 一些代码逻辑
	}
}

// 调用该类
const abc = new 类名()

如下：

class Student{
   name
    constructor(name){
        this.name = name
    }
    logName(){
        console.log('你好，我的名字是',this.name)
    }
}

const s = new Student('张三')
s.logName()

2. Es6-class 实现继承

使用关键字 extends，表示当前类继承于某个父类。
使用关键字super，用于访问对象字面量或类的原型上的属性，或调用父类的构造方法。

class Person{
    name
    constructor(name) {
        this.name = name
    }
    logName(){
        console.log('你好，我的名字是',this.name)
    }
}

class Student extends Person{
    age
    constructor(name,age){
        super(name)
        this.age = age
    }
}

const s = new Student('张三',23)

如果子类中定义了与父类同名的方法，那么采用就近原则(重写)，即子类调用该方法时调用的是子类下的该方法。

3. Es6-class 静态属性和私有属性

静态：类通过关键字static定义静态方法。不能在类的实例上调用静态方法，而应该通过类本身调用。
私有：类属性在默认情况下是公有的，但是可以使用增加哈希前缀 # 的方法定义私有类字段，声明和访问时也需要加上。定义私有的属性和方法无法在外部进行访问。

class Person{
    static pName = '静态属性'
    static logPName(){
        console.log('静态方法')
    }

    #age = '私有属性'
    #logName(){
        console.log('私有方法')
    }

    logName2(){
        console.log(this.#age)
        this.#logName()
    }
}

console.log(Person.pName)
Person.logPName()

const p = new Person()
p.logName2()

4. Es5-寄生组合式继承

通过接用构造函数来继承属性，通过原型链的混合形式来继承方法。

function Person(name){
	this.name = name
}

Person.prototype.logName = function(){
    console.log('我的名字是',this.name)
}

function Stu(name){
    Person.call(this,name)
}
// 继承属性
const prototype = Object.create(Person.prototype,{
    constructor:{
        value:Stu
    }
    // 修改constructor的指向
})
// 继承方法
Stu.prototype = prototype
const s = new Stu('张三')

没有修改constructor的指向的运行结果

修改constructor的指向的运行结果