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