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

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

借用构造函数模式

  • 介绍:借用构造函数模式解决了上面所说的共用引用类型和无法传参的问题,这种技术是通过在子类的构造函数中调用父类的构造函数,并且将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
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容