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

  • 时间:2018-06-06 01:57 作者:会技术的葛大爷 来源:会技术的葛大爷 阅读:220
  • 扫一扫,手机访问
摘要:一、面向对象编程(继承)怎样实现继承?我们的JavaScript比较特别了,主要通过原型链实现继承的。下面详情各种实现继承的方式:原型链继承,借使用构造函数,组合继承,原型式继承,寄生式继承,寄生组合式继承。二、实现继承方式1.原型链方式原型我们都知道,每个构造函数都有一个原型对象(prototyp

一、面向对象编程(继承)

怎样实现继承?

我们的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继承

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

三、小结

1.这次讲述了在js中是如何实现继承的,有很多中方式,但主要的是组合方式寄生组合方式。继承后我们可以够用父类的属性和方法,添加了代码的重使用性。

2.理解js继承作使用:有助于我们去阅读少量框架的源码,可可以本次代码有点难以了解,我打上了大量的注释,供大家一起阅读,还是那句话,多看几遍,其义自见。

本文出自:http://www.cnblogs.com/Ry-yuan/

作者:Ry(渊源远愿)

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】学习web前端开发是正确的选择(2019-09-15 16:55)
【系统环境|】干货整理!零基础html5网站开发学习步骤方法(保存不后悔)(2019-09-10 16:27)
【系统环境|】「前端入门」前端基本概念(2019-09-07 21:36)
【系统环境|】小白入门学习web前端,这些干货不能少(2019-09-05 20:59)
【系统环境|】不是计算机专业,哪个专业更适合学习web前端(2019-09-03 20:31)
【系统环境|】入行web前端开发可以做什么工作(2019-09-02 20:51)
【系统环境|】什么是Web前端呢?为什么说web前端开发人员的薪资高、前景好呢?(2019-08-31 20:55)
【系统环境|】2019年Web前端开发的8个趋势,你知道几个?(2019-08-29 16:23)
【系统环境|】学习web前端,掌握这些,才有底气跟面试官提薪资(2019-08-28 15:23)
【系统环境|】Web前端为什么那么好(2019-08-27 18:20)
手机二维码手机访问领取大礼包
返回顶部