Vue.js专区让前端飞饥人谷技术博客

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

2017-12-10  本文已影响33人  大春春

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

本章小结

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

JS中的继承原理

// 例如你爸爸很有钱，他还会打高尔夫球，那么就可以定义一个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

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

借用构造函数模式

        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

组合继承模式

        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函数本身。

原型式继承

// 首先创建一个用于通过一个对象创建另一个对象的实例的函数以及一个对象
        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的中获取属性和方法，也实现了对象之间的函数复用，但同时也有引用类型复用的问题产生。

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

寄生式继承

        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身上获取的。

上一篇下一篇

猜你喜欢

热点阅读