博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript 的继承
阅读量:5235 次
发布时间:2019-06-14

本文共 1426 字,大约阅读时间需要 4 分钟。

我们的JavaScript比较特别了,主要通过原型链实现继承的。

下面介绍各种实现继承的方式:原型链继承,借用构造函数,组合继承,原型式继承,寄生式继承,寄生组合式继承。

二、实现继承方式

1.原型链方式

原型我们都知道,每个构造函数都有一个原型对象(prototype),用于存放共享的属性方法。

原型链继承原理:我们要继承一个父类,那就把这个子类的原型对象指向父类的实例就行了。

a.代码:

JS面向对象编程OOP——JS继承

b.一些特别注意的地方:

  1. 上面我们看到为子类原型添加方法getName,它在子类原型对象指向父类实例后,也一定要在这句话后面,如果在前面的话,这方法会被覆盖的。因为子类原型对象指向父类实例时相当于重写子类原型对象。

  2. 为子类原型添加方法式不能用字面量的方式,这样会重写已经继承类父类的原型对象。

c.原型链继承的问题:

很明显的,继承的属性方法都在子类的原型对象里面,那么里面的属性方法都是共享的,这明显不是符合我们平常要求。

2.借用构造函数

借?是的,借一下父类的构造函数,怎么借?那就使用call或者apply方法吧。

借用构造函数原理: 就在子类创建构造函数时内部调用父类的构造函数。

代码演示:

JS面向对象编程OOP——JS继承

这里的借用构造函数可以实现属性和方法不会被共享,因为属性在构造函数中,而不是在原型对象中。但是这也说明这种方式没办法共享方法的。

3.组合继承(最常用)

组合继承=原型链继承+借用构造函数继承,没错就结合两种方法就好了。

组合继承原理:实例共享的属性方法:我就原型链继承;实例私用的属性方法:我就借用构造函数(结合两者的优点)

代码演示:

JS面向对象编程OOP——JS继承

可能有的疑惑:在原型链继承那里,子类原型对象指向类父类的实例,应该继承了所有的属性和方法啊,那应该都是共享的,但为什么colors,name属性不会共享呢?

原因:在调用借用构造函数时,属性在子类新实例中创建了,也就是在子类实例中已经有的父类属性就不用继续到原型对象中查找了,也就是屏蔽了,所以不会共享了。

4.原型式继承

这是道格拉斯·克罗克福提出的一个方式,他提出一个函数object() 来简单实现不用构造函数的继承

代码演示:

JS面向对象编程OOP——JS继承

认真读这段代码可以知道,这个函数最终返回一个对象,这个对象拥有传入对象o的全部属性和方法。从而实现了继承。

JS面向对象编程OOP——JS继承

原型式继承方式的出现,可以不用创建构造函数都能继承另一个对象的属性方法。但是很明显,所用属性都是共享的。

ES5中有个object.create()方法的作用和上面的object()一样的。

5.寄生式的继承

寄生式其实和利用了原型式,都要使用到object函数,但不同的是寄生式中新的对象能够添加自己的方法。

JS面向对象编程OOP——JS继承

6.寄生组合式继承(最理想)

上面组合式方式中虽然是最常用的,但有追求的还是会继续优化它。因为组合方式中也有不够好的地方:

一方面:我们可以看到调用了两次父类的构造函数。(一次是原型链继承中子类原型对象指向父类实例时,一次是借用构造函数中)

另一方面:就是上面疑惑,子类的原型中拥有父类已经有全部属性,但我们又要在调用子类构造函数时重写部分属性。

所以寄生组合方式就解决了上面,通过一个函数来代替组合方式中的原型链继承。

代码演示:

JS面向对象编程OOP——JS继承

寄生组合式的继承方式是最理想的方式,它使得子类构造函数继承父类构造函数的属性,子类的原型对象继承父类原型对象的属性和方法。

转载于:https://www.cnblogs.com/gopark/p/8157298.html

你可能感兴趣的文章
xmlSpy套件(Altova MissionKit 2016)的Ollydbg调试过程及破解
查看>>
无人驾驶技术之Kalman Filter原理介绍
查看>>
【BZOJ2002】[HNOI2010] 弹飞绵羊(大力分块)
查看>>
初学MillerRabin素数测试
查看>>
zoj1276 Optimal Array Multiplication Sequence(DP)
查看>>
BST_insert
查看>>
upper_bound下确界
查看>>
407. Trapping Rain Water II
查看>>
2-1、非线性方程与牛顿迭代法
查看>>
bzoj1001: [BeiJing2006]狼抓兔子(初识是你最小割)
查看>>
201621123006 《Java程序设计》第4周学习总结
查看>>
我的一个自己写的更新缓存的aop实例
查看>>
一步一步理解日历calendar(二)
查看>>
iOS 小知识汇总
查看>>
PDFObject.js、jquerymedia.js、pdf.js的对比
查看>>
【大话数据结构】 部分读书笔记
查看>>
xcode archive 去掉dsym文件和添加dsym文件
查看>>
子网掩码与子网划分
查看>>
C++ Primer 第11章 习题11.29
查看>>
NXOpen创建基准面和实体的交线(合并交线)
查看>>