JavaScript全解析——繼承

　　繼承

　　●要知道什么是繼承

　　●要知道繼承的方式有哪些

　　●每種的繼承方式是如何實現(xiàn)的

　　什么是繼承

　　●繼承關系出現(xiàn)在構(gòu)造函數(shù)和構(gòu)造函數(shù)之間

　　●當構(gòu)造函數(shù)A 的實例使用了 構(gòu)造函數(shù)B 的屬性和方法

　　●我們就說 構(gòu)造函數(shù)A 繼承自 構(gòu)造函數(shù)B

　　○管 構(gòu)造函數(shù)A 叫做子類

　　○管 構(gòu)造函數(shù)B 叫做父類

　　●總結(jié) ：繼承就是獲取存在對象已有屬性和方法的一種方式　　

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

    Person.prototype.play = function () { console.log('玩游戲') }

    // 將來我創(chuàng)建的 Person 的實例, 就會出現(xiàn)兩個屬性一個方法
    const p = new Person('Jack', 18)
    console.log(p)

    function Student(classRoom) {
      this.classRoom = classRoom
    }

    // 將來我創(chuàng)建的 Student 的實例
    // 當我的 s 實例能使用 name 屬性, age 屬性 和 play 方法的時候
    // 我們就說 Student 構(gòu)造函數(shù)繼承自 Person 構(gòu)造函數(shù)
    // Student 就是 子類
    // Person 就是 父類
    const s = new Student(2114)
    console.log(s)

      繼承的方式有哪些

　　原型繼承

　　●核心: 讓子類的原型指向父類的實例

　　●優(yōu)點:

　　○父類構(gòu)造函數(shù)體內(nèi)的屬性和原型上的方法都可以實現(xiàn)繼承

　　●缺點:

　　○繼承下來的屬性不在自己身上, 在自己的原型上

　　○一個構(gòu)造函數(shù)的實例, 需要在兩個地方傳遞參數(shù)

　　○所有子類的實例, name 和 age 一模一樣

<script>
    // 父類
    function Person(name, age) {
        this.name = name
        this.age = age
    }
    Person.prototype.play = function() {
        console.log('玩游戲')
    }
    // 子類
    function Student(classRoom) {
        this.classRoom = classRoom
    }
    // 實現(xiàn)繼承
    const p = new Person('Jack', 18)
    Student.prototype = p
    //  此時 s 的 __proto__ 指向誰 ?
    //  指向所屬構(gòu)造函數(shù)的 prototype
    //  因為 Student.prototype 就是 就是 Person 的實例
    //  s 的 __proto__ 就是 Person 的實例
    const s = new Student(2114)
    console.log(s)
    // 當你訪問 s 的 classRoom 成員的時候
    // 自己有直接使用
    console.log(s.classRoom)
    // 當你訪問 s 的 name 成員的時候
    // 自己沒有, 去到自己的 __proto__ 上查找
    // 因為自己的__proto__ 就是 Person 的實例
    // 其實就是去到 Person 的實例上查找
    console.log(s.name)
    // 當你訪問 s 的 play 成員的時候
    // 自己沒有, 去到自己的 __proto__ 上查找
    // 也就是去到 Person 的實例上查找, 發(fā)現(xiàn)還是沒有
    // 就再去 __proto__ 上查找
    // 自己的 __proto__ 的 __proto__
    // Person 實例      的 __proto__
    // Person 實例 的 __proto__ 就是 Person.prototype
    s.play()
    const s2 = new Student(2115)
    console.log(s2)
</script>

      借用構(gòu)造函數(shù)繼承

　　●核心: 把父類構(gòu)造函數(shù)當做普通函數(shù)調(diào)用, 并且改變其 this 指向

　　●優(yōu)點:

　　○子類的所有繼承下來的屬性都在自己身上

　　○子類的所有參數(shù)在一個地方傳遞

　　○子類的所有實例都可以給繼承下來的屬性賦不一樣的值

　　●缺點:

　　○父類的原型上的方法沒有繼承下來　

  // 父類
    function Person(name, age) {
        this.name = name
        this.age = age
    }
    Person.prototype.play = function() {
        console.log('玩游戲')
    }
    // 子類
    function Student(classRoom, name, age) {
        this.classRoom = classRoom
        // 實現(xiàn)繼承
        Person.call(this, name, age)
    }
    const s = new Student(2114, 'Jack', 18)
    console.log(s)
    const s2 = new Student(2115, 'Rose', 20)
    console.log(s2)

      組合繼承

　　●核心: 把原型繼承和借用構(gòu)造函數(shù)繼承放在一起使用

　　●優(yōu)點:

　　○都能繼承下來

　　○屬性在自己身上, 每一個子類實例繼承的屬性值都可以不一樣

　　●缺點:

　　○子類的原型上多了一套屬性

<script>
    // 父類
    function Person(name, age) {
        this.name = name
        this.age = age
    }
    Person.prototype.play = function() {
        console.log('玩游戲')
    }
    // 子類
    function Student(classRoom, name, age) {
        this.classRoom = classRoom
        // 借用繼承
        // 目的: 把屬性繼承在自己身上
        Person.call(this, name, age)
    }
    // 原型繼承
    // 目的: 繼承父類原型上的方法
    Student.prototype = new Person()
    // 創(chuàng)建子類的實例
    const s = new Student(2114, 'Rose', 20)
    console.log(s)
</script>

      ES6類繼承

　　●類的繼承是ES6中提出的一種繼承方式

　　●這個繼承有了語法的規(guī)定，必須要按照這樣的方式來繼承

　　●類的繼承的實現(xiàn)： 兩個步驟實現(xiàn)繼承

　　○書寫子類的時候, 加上 extends 關鍵字

　　■class 子類 extends 父類 {}

　　■目的: 繼承父類原型上的方法

　　○在子類的 constructor 內(nèi)書寫 super()

　　■super(實參)

　　■目的: 繼承父類的屬性

　　●注意：

　　○必須要書寫 super 和 extends

　　○在子類的 constructor 內(nèi) super 必須寫在 this.xxx 的前面(最前面)

　　●父類可以是構(gòu)造函數(shù)，但是子類不能的構(gòu)造函數(shù)因為extends和super關鍵字就是給類設計的

<script>
    // 父類
    class Person {
        constructor(name, age) {
            this.name = name
            this.age = age
        }
        play() {
            console.log('玩游戲')
        }
    }
    // 父類
    // function Person(name, age) {
    //   this.name = name
    //   this.age = age
    // }
    // Person.prototype.play = function () { console.log('玩游戲') }
    // 子類
    class Student extends Person {
        constructor(classRoom, name, age) {
            super(name, age)
            this.classRoom = classRoom
        }
        study() {
            console.log('學習')
        }
    }
    const s = new Student(2114, 'Jack', 18)
    console.log(s)
    class Teacher extends Person {
        constructor(gender, name, age) {
            super(name, age)
            this.gender = gender
        }
    }
    const t = new Teacher('男', 'Jack', 20)
    console.log(t)
</script>

      拷貝繼承

　　●利用 for in 循環(huán)遍歷對象

　　●把所有的內(nèi)容復制一份放在子類的原型上

   // 書寫 for in 循環(huán)的時候, 不光可以遍歷到對象自己身上的屬性, 也可以遍歷到原型上的屬性
    // 父類
    function Person(name, age) {
      this.name = name
      this.age = age
    }
    Person.prototype.sayHi = function () { console.log('hello world') }

    // 創(chuàng)建一個父類的實例
    // const p = new Person('Jack', 18)
    // console.log(p)
    // for (let k in p) {
    //   console.log(k)
    // }

    // 子類
    function Student(gender, ...arg) {
      this.gender = gender

      // 創(chuàng)建一個父類的實例
      const p = new Person(...arg)
      // 利用 for in 循環(huán)繼承
      for (let k in p) {
        // 隨著循環(huán), k 分別是 name age 和 sayHi
        Student.prototype[k] = p[k]
      }
    }

    const s = new Student('男', 'Jack', 18)
    console.log(s)
    console.log(s.name)
    const s2 = new Student('女', 'Rose', 20)
    console.log(s2)
    console.log(s2.name)

      寄生式繼承

   /*
      寄生式繼承1

    */

    // 父類
    function Person(name) {
      this.name = name
    }
    Person.prototype.sayHi = function () { console.log('hello world') }

    // 子類
    //   構(gòu)造函數(shù)內(nèi)不要寫 return
    function Student() {
      // 直接在子類里面 return 一個父類的實例
      const p = new Person('Jack')
      return p
    }

    // 創(chuàng)建一個子類的實例
    // 看似得到的是 Student 的實例, 但是其實得到的還是 Person 的實例
    const s = new Student()
    console.log(s)
    
    
    
       /*
      寄生式繼承2 - 對寄生式繼承1 的 改造
    */

    // 父類
    function Person(name) {
      this.name = name
    }
    Person.prototype.sayHi = function () { console.log('hello world') }

    // 子類
    //   構(gòu)造函數(shù)內(nèi)不要寫 return
    function Student(gender) {
      this.gender = gender
    }

    // 寄生一下 父類的原型
    // Student的原型指向 Person的原型
    Student.prototype = Person.prototype

    // 創(chuàng)建一個子類的實例
    // Student 自己沒有原型使用了, 直接使用 Person 的原型
    const s = new Student('男')
    console.log(s) 
    
    
    
        // 寄生式組合繼承

    // 父類
    function Person(name, age) {
      this.name = name
      this.age = age
    }
    Person.prototype.sayHi = function () { console.log('hello world') }


    // 實現(xiàn)繼承
    //   借助一個第三方構(gòu)造函數(shù)
    function Third() {}
    //   第三方構(gòu)造函數(shù)去繼承 父類
    //   利用寄生繼承的方式來實現(xiàn)
    // 第三方的 原型 指向 父類的原型
    Third.prototype = Person.prototype
    // 將來我使用第三方創(chuàng)建實例的時候
    const t = new Third()

    // 子類
    function Student(...arg) {
      // 利用 call 繼承
      Person.call(this, ...arg)
    }
    // 子類去想辦法繼承第三方的內(nèi)容
    //   利用原型繼承去繼承第三方內(nèi)容
    //   子類的原型指向第三方的實例
    Student.prototype = new Third()
    const s = new Student('Jack', 18)
    console.log(s)


    // 利用了一個自執(zhí)行函數(shù)
    // 自執(zhí)行函數(shù), 不需要名字的函數(shù)
    ;(function () {
      var a = 100
      console.log('你好 世界')
    })()


    // 子類
    function Student(gender, ...arg) {
      this.gender = gender

      Person.call(this, ...arg)
    }

    // 把 第三方內(nèi)容 放在自執(zhí)行函數(shù)內(nèi)
    (function () {
      function Third() {}
      Third.prototype = Person.prototype
      Student.prototype = new Third()
    })()

    const s = new Student('男', 'Jack', 18)
    console.log(s)

      冒充式繼承　　

    /*
      冒充繼承
        + 利用了一個淺拷貝 + 寄生繼承
    */

    // 父類
    function Person(name, age) {
      this.name = name
      this.age = age
    }
    Person.prototype.sayHi = function () { console.log('hello world') }

    const p = new Person('Jack', 18)

    // 寄生繼承
    function Student(gender) {
      this.gender = gender

      // 創(chuàng)建完畢實例以后, 拷貝一個父類的實例
      Object.assign(this, p)
    }
    Student.prototype = Person.prototype

    const s = new Student('男')


    console.log(s)