原型继承和class继承

class Persion {} 

class 的本质其实是函数

typeof Persion === 'function'

　　

/**
 * 原型链继承的例子
 * 功能: 1.获取元素改变或者获取他的innerhtml。
 *       2.添加事件。
*/

function Elem(id) {
    this.elem = document.getElementById(id)
}
Elem.prototype.html = function(val) {
    let elem = this.elem;
    if (val) {
        elem.innerHTML = val
        return this //链式操作
    } else {
        return elem.innerHTML
    }
}

Elem.prototype.on = function(type,fn){

let elem = this.elem;
elem.addEventListenner(type, fn);
return this;
}

let div = new Elem();

　　原型继承的缺点是在一个类上创建两个实例，在一个实例对象上修改属性，另一个实例上的属性也会被修改

function Parent() {
    this.name = "parent"
    this.arr = [1, 2, 3]
}

function Child() {
    this.type = 'child'

}
Child.prototype = new Parent()
let s1 = new Child()
let s2 = new Child()
s1.arr.push(2222)
console.log(s2.arr)//[ 1, 2, 3, 2222 ]
console.log(s1.arr)//[ 1, 2, 3, 2222 ]

构造函数

解决引用类型共享问题

　

function Parent(name) {
    this.name = name
    this.color = ['pink', 'red']
}

function Child() {
    Parent.call(this)//父级构造函数的那个类指向子构造函数的实例上(原理)
        //定义自己的属性
    this.value = 'test'
}
let child1 = new Child()
let child2 = new Child()
child1.color.push("white")

console.log(child1)
    /*
    name: undefined,
    color: ['pink', 'red', 'white'],
        value: 'test'
    }*/
console.log(child2) //Child { name: undefined, color: [ 'pink', 'red' ], value: 'test' }

　　

 // 缺点就是子类无法继承父类的方法
Parent.prototype.say=function(){}
上面的say方法，子类无法拥有

　　组合继承

function Parent(value) {
    this.val = value
}
Parent.prototype.getValue = function() {
    console.log(this.val)
}

function Child(value) {
    Parent.call(this, value)
}
Child.prototype = new Parent()
const children = new Child(1)
children.getValue()//1
console.log(children instanceof Parent)//true

　　寄生组合式继承

function Parent(value) {
    this.val = value
}
Parent.prototype.getValue = function() {
    console.log(this)
}

function Child(value) {
    Parent.call(this, value)
}
Child.prototype = Object.create(Parent.prototype, {
    constructor: {
        value: Child,
        enumerable: false,
        writable: true,
        configurable: true
    }
})

　　以上继承实现的核心就是将父类的原型赋值给子类，并且将构造函数设置为子类，这样既解决了无用的父类属性问题，还能正确的找到子类的构造函数

class 继承

class Parent {
    constructor(value) {
        this.val = value
    }
    getValue() {
        console.log(this.val)
    }
}
class Child extends Parent {
    constructor(value) {
        super(value)
        this.val = value
    }
}
let child = new Child(2)
child.getValue()//2
console.log(child instanceof Parent)//true

　　核心是使用关键字extends 并在子类中使用关键字super