摘要：引言上篇文章介紹原型，這篇文章接著講繼承，嘔心瀝血之作，大哥們點(diǎn)個(gè)贊呀明確一點(diǎn)并不是真正的面向?qū)ο笳Z(yǔ)言，沒(méi)有真正的類，所以我們也沒(méi)有類繼承實(shí)現(xiàn)繼承有且僅有兩種方式，和原型鏈在介紹繼承前我們先介紹下其他概念函數(shù)的三種角色一個(gè)函數(shù)，有三種角色。

上篇文章介紹原型，這篇文章接著講繼承，嘔心瀝血之作，大哥們點(diǎn)個(gè)贊呀

明確一點(diǎn)：JavaScript并不是真正的面向?qū)ο笳Z(yǔ)言，沒(méi)有真正的類，所以我們也沒(méi)有類繼承

實(shí)現(xiàn)繼承==有且僅有兩種方式，call和原型鏈==

在介紹繼承前我們先介紹下其他概念

一個(gè)函數(shù)，有三種角色。
當(dāng)成普通函數(shù)，當(dāng)成構(gòu)造函數(shù)（類），當(dāng)成對(duì)象

function Person (nickname) {
        var age = 15 //當(dāng)普通函數(shù)使 **重點(diǎn):稱為私有屬性**
        this.age = 30    //當(dāng)構(gòu)造函數(shù)使 **重點(diǎn):稱為實(shí)例屬性**
    }
    Person.prototype.age = 50 //當(dāng)構(gòu)造函數(shù)使   **重點(diǎn):稱為原型屬性**
    Person.age =100  //當(dāng)對(duì)象使 **重點(diǎn):稱為靜態(tài)屬性**    

==我個(gè)人把屬性和方法統(tǒng)一稱為廣義上的屬性，所以上面說(shuō)法其實(shí)不嚴(yán)謹(jǐn)==

大家猜一猜Array.isArray是靜態(tài)方法還是原型方法，為啥？Array.push呢？

繼承原則:
使用call繼承實(shí)例上的屬性
使用原型鏈繼承原型上的屬性
子類需要有自己的原型，父類也必須要有自己的原型，子實(shí)例在自己的原型上找不到屬性的時(shí)候才會(huì)到父原型上去找(這也就是子類.prototype = 父類.prototype不行的原因，因?yàn)樗鼈冎虚g沒(méi)有==“緩沖”==，改了子類原型相當(dāng)于就改了父類原型！)

const Person = function (name) {
        this.name = name
    }
Person.prototype.introduce = function(){
  Object.entries(this).forEach((item)=>{
        console.log(`my ${item[0]} is ${item[1]}`)
    })
    
}

const Student = function (name,age) {
        Person.call(this,name)
        this.age = age
    }
Student.prototype = new Person()      //這里new了父類一次，增加了額外開(kāi)銷
Student.prototype.constructor =  Student         //這一句可以讓student.constructor.name由Person變?yōu)镾tudent 方便確認(rèn)構(gòu)造函數(shù)

let student = new Student("小明",15)
student.introduce()  繼承父類原型方法的同時(shí)繼承父類實(shí)例上的屬性
//my name is 小明
//my age is 15      

組合繼承有一個(gè)缺點(diǎn),會(huì)額外new父類一次，增加了額外開(kāi)銷（想一想如果父類特別大這消耗會(huì)有多大）

從名字也看出來(lái)了，借用原型鏈繼承，實(shí)例能通過(guò)__proto__追蹤到傳入到參數(shù)obj，所以源碼如下
//Oject.create(obj)
Object.create = function(obj){

var fn = funcion(){}
fn.prototype = obj
reurturn new fn() 

}
var A = Object.create(B) //A能找到B
=再次強(qiáng)調(diào)一遍，A通過(guò)原型鏈最終到B=

我們?cè)倏匆幌陆M合繼承的原型鏈 Student-->Person的實(shí)例-->Person
還記得我們?cè)谧铋_(kāi)始繼承原則中說(shuō)的緩沖嗎，Person的實(shí)例就是這么一個(gè)緩沖 但是缺點(diǎn)就是構(gòu)造這么一個(gè)緩沖開(kāi)銷大了

所以我們有一個(gè)優(yōu)化手段

Student.prototype = new Person()  //未優(yōu)化的時(shí)候   Person實(shí)例充當(dāng)原型鏈的中間對(duì)象（緩沖）
-------------------------
Student.prototype = Object.create(Person.prototype) //優(yōu)化后    一個(gè)繼承Person的空對(duì)象充當(dāng)中間對(duì)象（緩沖）
------------------------
Student.prototype.__proto__ = Person.prototype  //當(dāng)然也有人這么寫  道理都是一樣，Student.prototype.__proto__做緩沖

既然new在“類”的創(chuàng)建里面必須使用，那么我們就說(shuō)一下new到底干了啥事情

1.創(chuàng)建一個(gè)對(duì)象o繼承構(gòu)造函數(shù)
2.讓構(gòu)造函數(shù)的this變?yōu)閛,并執(zhí)行構(gòu)造函數(shù)，將返回值設(shè)置為k
3.如果k

//仿寫new
function new1(func) {
        var o = Object.create(func.prototype)
        var k = func.apply(o,arguments[1])
        return typeof k === "object"? k: o
    }
const x = new1(Student,["張三"])
x.name //"張三"
x.eat //"i am hungry,i want to eat!"

我們回過(guò)頭再分析一下構(gòu)造函數(shù)模式繼承

const Person = function (name) {
        this.name = name
    }
const Students = function (name) {
        Person.call(this,name) //this是student實(shí)例
    }
const xm = new Students("小明")  //分析這里干了什么
console.log(xm)  //Students?{name: "小明"}

1.讓空對(duì)象o繼承Students(o能訪問(wèn)Students的原型)
2.student執(zhí)行，執(zhí)行Person的代碼,this是o,并且傳入name, o.name="小明"返回的k是undefined
3.返回o，也就是返回{name:"小明"}

class Person {
}
class Student extends person{
}

在babel es2015-loose模式下編譯后的源碼如下

"use strict";

    function _inheritsLoose(subClass, superClass) {
        subClass.prototype = Object.create(superClass.prototype);
        subClass.prototype.constructor = subClass;
        subClass.__proto__ = superClass;
    }

    var Person = function Person() {
    };

    var Student =
        /*#__PURE__*/
        function (_person) {
            _inheritsLoose(Student, _person);

            function Student() {
                return _person.apply(this, arguments) || this;
            }

            return Student;
        }(person);

嚴(yán)格模式下，高級(jí)單例模式返回一個(gè)Student, 可以看到Person的實(shí)例屬性用的Person的構(gòu)造函數(shù)+apply繼承的
原型屬性用的_inheritsLoose這個(gè)方法繼承的
_inheritsLoose方法貌似就是我們之前說(shuō)的寄生組合繼承

我們知道vue里面的數(shù)組有變異方法，變異方法有啥功能呢，就拿push來(lái)說(shuō)，一方面數(shù)組會(huì)變，另外一方面有響應(yīng)式（假設(shè)觸發(fā)render方法）
思路：APO編程思想
數(shù)組之所以有push方法，是因?yàn)锳rray.prototype上有push方法
我們需要實(shí)現(xiàn)自己的push方法，掛在Array.prototype上對(duì)原型鏈追蹤進(jìn)行攔截，但是呢又不能改變?cè)玩溕蠈?duì)非變異方法
原型鏈?zhǔn)疽猓?/p>

    Vue里面添加過(guò)監(jiān)控的數(shù)組實(shí)例--->我們自己實(shí)現(xiàn)的變異方法-->原來(lái)的Array.prototype
    

const arrList = ["push","pop","shift","unshfit","reverse","sort","splice"]
const render = ()=>{console.log("響應(yīng)式，渲染視圖")}
const proto = Object.create(Array)
arrList.forEach((method)=>{
    proto[method] = function(){
        render()
        Array.prototype[method].call(this,...arguments)
    }
})
var data = [1,2,3]
data.__proto__ = proto    //mvvm響應(yīng)式原理，如果添加響應(yīng)式的目標(biāo)是數(shù)組，我就執(zhí)行這個(gè)操作

data.push(4)   // 響應(yīng)式，渲染視圖,(data[1,2,3,4])

本節(jié)詳細(xì)介紹了繼承的原理以及優(yōu)化，對(duì)于es6的繼承語(yǔ)法糖也做了剖析。同時(shí)介紹了一下mvvm下數(shù)組借用繼承實(shí)現(xiàn)響應(yīng)式的用法，由于本人水平有限，如果有什么不對(duì)的地方，歡迎留言指出。