053|JavaScript 继承详解

作者: 中年小钢炮 | 来源:发表于2017-05-27 03:03 被阅读62次

面向对象编程三大特性:封装、继承、多态。封装在前面的课程中已经详解。这一节来了解一下继承。

继承的意思是,如果A、B两个类型,如果A类型的特性B类型全有,则说B继承于A。继承多可扩展到多个类型,比如再加一个C类型,如果B类型的特性C全有,则说C继承于B类型。因此继承链就是:

C -> B -> A

继承的原理

前面的课程中,我们已经知道JavaScript的实例对象有一个__proto__属性。当访问一个实例的属性,如果实例本身中找不到,则会到__proto__中寻找,而instance.__proto__就是class object。

实际上,JavaScript引擎在处理时,会反复地在__proto__所指向的对象中寻找。也是说,如果__proto__中找不到,则到__proto__.__proto__中寻找... ...依次类推,直到找到或__proto__为空。

通过__proto__这个特性,我们就能够实现继承。
假设有A、B两个类型。在没有继承关系下,它们的关系是这图这样的:

无继承关系下的类图

在有继承关系的情形下,类图变成了下面这样:

B继承A情形下的类图

当B继承A时,B的__proto__指向了A类型的类对象A class object。就是这样一个微小的改变,就使得B继续于A。

类对象的__proto__默认指向 Object.prototype。

我们来梳理一下流程,我们以 instance_b.funcA 为入口,我们来分析一下为什么instance_b此时能够调用A类型的funcA方法:

  1. 在instance_b中寻找funcA方法,未找到。
  2. 在instance_b.__proto__中(即B class object)寻找funcA方法,未找到。
  3. 在B class object.__proto__中寻找funcA方法,找到了,返回结果。

实现继承

Object.create是一个函数,通过这个函数我们可以设置原型。

Object.create(proto) // 创建一个新对象,并将这个对象的__proto__设置为参数proto所指对象

因为实现继承需要设置__proto__,而Object.create函数就能够设置__proto__,通过Object.create,我们就能够实现继续。代码举例如下:

function A()
{
}
A.prototype.funcA=function(){
    console.log("funcA")
}

function B()
{

}

B.prototype = Object.create(A.prototype) // 设置继承

var b = new B()
b.funcA()

好了。这篇内容介绍了JavaScript最为核心的原型模型,掌握好了这一节内容,基本上任何有关JavaScript的面试你都不用惧怕了。

什么是多态?

相关文章

  • 005|JavaScript ES6新特性之Classes

    在过去,需要像 053|JavaScript 继承详解 那样实现继承。JavaScript这种继承实现方式与其它面...

  • 053|JavaScript 继承详解

    面向对象编程三大特性:封装、继承、多态。封装在前面的课程中已经详解。这一节来了解一下继承。 继承的意思是,如果A、...

  • 好程序员分享JavaScript六种继承方式详解

    好程序员分享JavaScript六种继承方式详解,继承是面向对象编程中又一非常重要的概念,JavaScript支持...

  • Javascript继承详解

    一、经典的继承方式 [Douglas Crockford]http://javascript.crockford....

  • JavaScript继承方式详解

    JavaScript实现继承的方式主要有两种: 原型链继承和借助构造函数继承 一、原型链继承 原型链继承的主要思想...

  • JavaScript继承详解(Klass)

    之前的JavaScript继承一文中已经介绍了继承,但那篇只能算简介。本篇结合原型链详细介绍一下JavaScrip...

  • JavaScript继承详解(Mixin)

    上一篇JavaScript继承详解(Klass)介绍了各种继承的模式。但究竟为何要继承?一个很重要的目的就是为了代...

  • 详解JavaScript对象继承方式

    一、对象冒充 其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式)。因为构...

  • 前端面试题目(二)

    javascript对象的几种创建方式 javascript继承的6种方法 详情:[JavaScript继承方式详...

  • 函数的原型对象

    什么是原型? 原型是Javascript中的继承的继承,JavaScript的继承就是基于原型的继承。 函数的原型...

网友评论

    本文标题:053|JavaScript 继承详解

    本文链接:https://www.haomeiwen.com/subject/eqdffxtx.html