《高程第六章---面向对象程序设计》小结---关于继承

《JavaScript高级程序设计》这本书比较厚，之前刚学JS的时候挑战过一次，结果止步第三章。现在工作了一段时间想想还是得回过头来补充一下基础知识的。目前刚看完第六章，就从第六章开始总结吧，再逐步补充之前的好了。

本章小结

继承章节主要描述在JS中的几种继承方式以及这些方式的实现，以及JS继承继承实现的原理。
其中，JS中继承的实现主要是通过原型链实现的。
该章节中介绍的JS中的几种继承方式有：①借用构造函数；②组合继承；③原型式继承；④寄生式继承；⑤寄生组合式继承；

JS中的继承原理

• 介绍：许多的OO语言都支持两种继承方式：接口继承和实现继承，接口继承主要是通过继承方法签名实现，但是JS中的函数没有签名，所以JS只支持实现继承，而JS中的实现继承则是通过原型链完成的。
• JS原型链简述：
  JS中的原型链是指实例对象和它的构造函数之间的关系，其中实例对象的内部指针__proto__始终指向其构造函数的原型对象prototype，之后假设调用实例中的一个方法，而在实例自身中并未找到该方法，则会通过它的内部指针__proto__进入其构造函数的原型对象prototype中去寻找该方法，如果找到，则调用原型对象中的这个方法。最简单的例子就是：所有的对象都是Object构造函数的实例，所有的对象都继承了Object.prototype中的方法，具体体现就是所有的对象都有toString这个方法。
  关于原型链的图示，可以在我的这篇博客中找到高程第六章---面向对象程序设计》小结---创建对象
• 继承实例（一个构造函数继承另一个构造函数的方法和属性：儿子函数继承爸爸函数）

// 例如你爸爸很有钱，他还会打高尔夫球，那么就可以定义一个Father函数
        function Father(){
            this.isARich = true
        }
        Father.prototype.golf = function(){
            console.log('golf')
        }
// 而你很穷
        function Son() {
            this.isAPoor = true
        }

// 但是可怜天下父母心，爸爸让你继承了他的一切，这时候，你拿着你爸爸的钱，并且学会了打高尔夫
// 这时候就可以将Father函数的一个实例赋值给Son函数的原型对象
Son.prototype = new Father()

// 然后这时候你又学会了打游戏，然后创建了一个你自己的实例，sonA就是你自己
        Son.prototype.playGame = function() {
            console.log('play a game')
        }
        let sonA = new Son()

// 那么这时候，你虽然继承了爸爸的钱，但并不是你的钱，所以你是富人的同时也是个穷人
sonA.isAPoor // true
sonA.isARich // true

// 但与此同时，你会打高尔夫的同时也会打游戏
sonA.golf() // golf
sonA.playGame() // play a game

• 例子图示：
  那么在上面的儿子和爸爸的例子中，它们原型图示是怎么样的呢？
  

  

  image.png
  
  在图中可以很清晰地看到，当sonA调用golf函数的时候，它会现在自身中查找有无该方法，没有的话通过__proto__去到其构造函数Son.prototype中查找，但是也没有发现golf方法，但是在Son.prototype中有一个__proto__指针，指向了Father.prototype，于是它又通过这个指针去到了Father.prototype中，并且找到了golf方法，于是调用。

• 例子与Object构造函数的关系
  在上面我也说过，所有的对象都继承自Object函数的原型对象，那么上面的例子和Object构造函数关系如何呢？如下图：
  

  

  image.png

• 注意事项

  • 子类型如果需要有自己的方法，那么需要在替换其原型的操作后再进行添加，否则替换原型后之前添加的方法无效。原因是替换原型后，子类型原本的原型已被废弃。另外，子类型替换原型后为其添加自定义方法也不能用对象字面量的方式去添加；

• 通过原型链方式继承所产生的问题

  1. 如果在父类型的构造函数中，存在定义引用类型数据的情况下，所有的子类型构造出来的实例都会因此继承同一个引用类型数据。来看一个例子：

        function Father() {
            this.identity = {
                name: 'oxc',
                age: 10
            }
        }

        function Son() {}
        Son.prototype = new Father()
        let sonA = new Son()
        let sonB = new Son()

在该例中，Father函数中定义了一个对象，然后初始化一个实例给Son函数继承，又初始化了两个Son函数的实例。这两个实例中的identity对象其实是同一个对象，并且这个identity对象与Father实例中的identity也是同一个对象，当我对identity进行修改时，会同时影响sonA和sonB。

image.png

原因是， new Father函数只进行了一次，所以只初始化了一个identity对象，而Son构造函数的原型对象被赋值为 new Father，代码就变成类似上一章节 《高程第六章---面向对象程序设计》小结---创建对象所说的原型模式了，相当于如下代码:

        Son.prototype = {
            identity: {
                name: 'oxc',
                age: 10
            }
        }
// 而初始化出来的实例SonA和SonB实际上都没有自己的identity属性，全是通过原型链向Son.prototype拿的。

2. 创建子类型的时候，无法向父类型传参，也就只能采用父类型中定义的数据。
   因为这些问题，很少有人只使用原型链的继承。而针对这些问题，后来又出现了借用构造函数的模式进行解决。

借用构造函数模式

• 介绍：借用构造函数模式解决了上面所说的共用引用类型和无法传参的问题，这种技术是通过在子类的构造函数中调用父类的构造函数，并且将this绑定在子类上实现的。看下面例子：
• 实例：

        function Father(name) {                                                 
            this.identity = {
                name: name,                         
                age: 10
            }
        }

        function Son(name) {                                                   function Son(name){
            // 此处用apply是一样的                                                this.identity = {
            Father.call(this, name)            ====》》 相当于                      name: name,
        }                                                                         age: 100
                                                                                }
                                                                               }
        let sonA = new Son('oxc')
        let sonB = new Son('大春春')

在该例子中，通过在Son构造函数中调用了Father构造函数，执行了identity的初始化，并且将this绑定在Son之中，使得Son构造函数的每个实例都拥有了自己的identity，并且拥有传递参数的执行空间。

image.png

• 利用构造函数模式所产生的问题：
  如果只是借用构造函数模式，那么也会因此带来构造函数模式所拥有的问题，就是函数的重复定义问题，并且因为在子类中调用父类的方法并没有使用new操作符，所以也无法继承父类在原型上定义的方法（不适用new操作符就无法将子类的原型对象指定为父类的实例），因此又出现的组合继承的方案。

组合继承模式

• 介绍：组合继承很好理解，与《高程第六章---面向对象程序设计》小结---创建对象这一章节所说的组合组合使用构造函数和原型模式原理都是将原型链和构造函数的技术结合起来，请看下面例子：
• 实例：

        function Father(name) {
            this.identity = {
                name: name,
                age: 10
            }
        }
        Father.prototype.golf = function() {
            console.log('golf')
        }

        function Son(name) {
            Father.call(this, name)
        }

        Son.prototype = new Father()

        let sonA = new Son('oxc')
        let sonB = new Son('大春春')

该例子其实和借用构造函数模式区别不大，但是却利用Son.prototype = new Fathe()使Son构造函数的原型对象指定为了Father构造函数的实例，从而Son的实例可以通过__proto__指针调用Father原型对象上的golf函数

image.png

当然了，也不要忘记将在 Son.prototype = new Father()之后添加 Son.prototype.constructor === Son，用以将构造者属性指定回Son函数本身。

原型式继承

• 介绍：这种模式的继承主要用于不想创建构造函数，只想通过一个对象A创建一个类似的对象B，而由这种方法创建出来的对象B有一个特征，就是共享了对象A中的引用类型（浅复制）。
• 实例：

// 首先创建一个用于通过一个对象创建另一个对象的实例的函数以及一个对象
        let oneObj = {
            name: 'oxc',
            golf() {
                console.log('golf')
            }
        }

        function createObj(obj) {
            let F = new Function()
            F.prototype = obj
            return new F()
        }
// 然后执行这个函数，将其返回的新对象赋值给一个变量
let anotherObj = createObj(oneObj)

如上述例子这样创建的对象anotherObj，它的内部指针指向oneObj，所以可以通过__proto__获取到oneObj的所有属性和方法.

image.png

而且因为可以从oneObj的中获取属性和方法，也实现了对象之间的函数复用，但同时也有引用类型复用的问题产生。

• Object.create
  ES5根据上面的方法创建了Object.create原生方法，Object.create方法执行的操作与上面例子中的createObj函数完全一样.

还有一中继承的方式叫做寄生式继承，这种方式几乎就是原型继承的增强版，用于给新创建的对象添加自己的属性和方法。

寄生式继承

• 介绍：寄生式继承方法与原型继承方法类似，不过能更好地对新增对象添加自己的方法和属性而不影响原有属性，这种方法是通过创建一个函数，在这个函数内创建出新的对象，然后进行新对象自身的方法和属性的添加。
• 实例

        let oneObj = {
            name: 'oxc',
            golf() {
                console.log('golf')
            }
        }

        function createObj(o) {
            let obj = Object.create(o)
            obj.playAGame = function() {
                console.log('game')
            }
            return obj
        }
        let anotherObj = createObj(oneObj)

上面例子中的anotherObj拥有了自己的方法playAGame，当调用时，这个方法是在anotherObj自身获取到而不是通过__proto__到oneObj身上获取的。

• 寄生式继承的问题
  这种方法实现的继承有一个毛病，就是当我基于oneObj创建了多个新对象后，他们的playAGame方法不能进行复用，如下图所示：
  
  

  image.png