浅谈JavaScript面向对象--继承

一、继承的概念

子类共享父类的数据和方法的行为，就叫继承。

二、E55如何实现继承？探索JavaScript继承的本质

2.1构造函数之间的“复制粘贴”

第一条路是通过构造函数来继承，这可以理解为子类直接复制了父类构造函数的代码，然后按照一定的规矩“粘贴”在自己的构造函数中，为己所用。举个例子：

　　

如果A要继承B的属性，是不是直接把this.name = name复制粘贴到A函数就可以了？简单粗暴。

所以在A中，直接执行B函数，不就等于执行了this.name = name吗。

　　

直接这样尝试下，发现是不行的，这是因为B中的this指向B的实例化对象，A中的this指向A的实例化对象，所以要统一this的指向。

　　

这样，就完成了一次合乎规范的构造函数之间的“代码复制粘贴”，也就是继承。这其实也是后面ES6中super关键字的实现原理。

2.2原型链上要“挤进一位来客”

当然，这还是不够的，因为在实际情况中，B这个构造函数还可以拓展一些方法和属性到原型链上，比如:

　　

我们在构造函数B中拓展了一个skill方法，发现上面那种“复制粘贴”的方法不好使了对吗？这是因为A的原型链和B的原型链还没有“建立联系”，我们需要在A和B之间搭一座桥，把他们联系起来。

熟悉基本原型链的同学都知道，原型链的“通信”是通过隐式原型(__proto__)来实现的。所以基本原型链是这样的：

　　

这就是基本的原型链，现在的情况是，A要继承B的属性和方法，所以B得加入到原型链中，并且，B要在A的上面，所以理想的情况是不是应该像下面这样：

　　

实际上我们也确实是这么做的，也就是令A.prototype.__proto__ = B.prototype。

控制台试一下，成功了。

　　

总结一下：ES5实现继承需要两步，第一：合乎规范的“代码复制粘贴”；第二，原型链上“搭座桥”。

三、ES6实现继承，其实只是换了种叫法

首先，要明确JavaScript是没有真正“类”的概念的，ES6中的类，就是ES5中构造函数。

　　

这件事是很容易验证的，类A的类型打印出来，就是function。

ES6实现类的继承，是不是也要“两步走”呢？答案是肯定的，看看ES6的继承如何实现：

　　

其实原理是完全一样的，extends相当于做了A.prototype.__proto__ = B.prototype这件事，而super则相当于执行了ES5中的B.call(this,name)这个操作，只是换个操作的名字向Java靠拢而已。

以上所述是小编给大家介绍的JavaScript面向对象继承详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JS面向对象编程详解

    JS面向对象编程详解

    序言 在JavaScript的大世界里讨论面向对象,都要提到两点:1.JavaScript是一门基于原型的面向对象语言 2.模拟类语言的面向对象方式.对于为什么要模拟类语言的面向对象,我个人认为:某些情况下,原型模式能够提供一定的便利,但在复杂的应用中,基于原型的面向对象系统在抽象性与继承性方面差强人意.由于JavaScript是唯一一个被各大浏览器支持的脚本语言,所以各路高手不得不使用各种方法来提高语言的便利性,优化的结果就是其编写的代码越来越像类语言中的面向对象方式,从而也掩盖了JavaSc

  • javascript面向对象三大特征之多态实例详解

    本文实例讲述了javascript面向对象三大特征之多态.分享给大家供大家参考,具体如下: 多态 从某种意义上来说,多态是面向对象中重要的一部分,也是实施继承的主要目的. 一个实例可以拥有多个类型,它既可以是这种类型,也可以是那种类型,这种多种状态被称为类的多态. 多态的表现形式很多,其中继承和重载都是多态的表现形式. --整理自<jQuery开发从入门到精通> 继承 继承本身是多态的一种实现.详情请参考前面一篇:https://www.jb51.net/article/166097.htm

  • JS 面向对象之神奇的prototype

    JavaScript中对象的prototype属性,可以返回对象类型原型的引用.这是一个相当拗口的解释,要理解它,先要正确理解对象类型(Type)以及原型(prototype)的概念. 1 什么是prototype JavaScript中对象的prototype属性,可以返回对象类型原型的引用.这是一个相当拗口的解释,要理解它,先要正确理解对象类型(Type)以及原型(prototype)的概念. 前面我们说,对象的类(Class)和对象实例(Instance)之间是一种"创建"关系,

  • javascript面向对象三大特征之封装实例详解

    本文实例讲述了javascript面向对象三大特征之封装.分享给大家供大家参考,具体如下: 封装 封装(Encapsulation):就是把对象内部数据和操作细节进行隐藏.很多面向对象语言都支持封装特性,提供关键字如private来隐藏某些属性和方法.要想访问被封装对象中的数据,只能使用对象专门提供的对外接口,这个接口一般为方法.调用该方法能够获取对象内部数据. 在JavaScript语言中没有提供专门的信息封装关键字,不过可以使用闭包来创建,只允许从对象内部访问的方法和属性.另外,接口也是数据

  • JavaScript碎片—函数闭包（模拟面向对象）

    经过这几天的博客浏览,让我见识大涨,其中有一篇让我感触犹深,JavaScript语言本身是没有面向对象的,但是那些大神们却深深的模拟出来了面向对象,让我震撼不已.本篇博客就是在此基础上加上自己的认知,如有错误,还请见谅. 具体来说实现模拟面向对象主要是利用JavaScript函数闭包这个概念.由于JavaScript中的每一个function都会形成一个作用域,而如果变量声明在这个域中,那么外部是无法直接去访问,要想访问必须new出一个实例来,相当于Java中class.首先让我们来了解一下pr

  • JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)

    什么是面向对象?面向对象是一种思想!(废话). 面向对象可以把程序中的关键模块都视为对象,而模块拥有属性及方法.这样我们如果把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作.接下来将为大家讲解在JS中面向对象的实现.   工厂模式 工厂模式是软件工程领域一种广为人知的设计模式,而由于在ECMAScript中无法创建类,因此用函数封装以特定接口创建对象.其实现方法非常简单,也就是在函数内创建一个对象,给对象赋予属性及方法再将对象返回即可. function createBlo

  • JS实现面向对象继承的5种方式分析

    本文实例讲述了JS实现面向对象继承的5种方式.分享给大家供大家参考,具体如下: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式 1. 使用对象冒充实现继承(该种实现方式可以实现多继承) 实现原理:让父类的构造函数成为子类的方法,然后调用该子类的方法,通过this关键字给所有的属性和方法赋值 function Parent(firstname) { this.fname=firs

  • JavaScript面向对象中接口实现方法详解

    本文实例讲述了JavaScript面向对象中接口实现方法.分享给大家供大家参考,具体如下: 接口是面向对象编程的基础,它是一组包含了函数型方法的数据结构,与类一样,都是编程语言中比较抽象的概念.比如生活中的接口,机顶盒,人们利用它来实现收看不同频道和信号的节目,它犹如对不同类型的信息进行集合和封装的设备,最后把各种不同类型的信息转换为电视能够识别的信息.在编程语言中的接口,实际上是不同类的封装并提供统一的外部联系通道,这样其他对象就可以利用接口来调用不同类的成员了. --整理自<jQuery开发

  • javascript面向对象三大特征之继承实例详解

    本文实例讲述了javascript面向对象三大特征之继承.分享给大家供大家参考,具体如下: 继承 在JavaScript中的继承的实质就是子代可以拥有父代公开的一些属性和方法,在js编程时,我们一般将相同的属性放到父类中,然后在子类定义自己独特的属性,这样的好处是减少代码重复.继承是面向对象的基础,是代码重用的一种重要机制. --此文整理自 <jQuery 开发从入门到精通> ,这是本好书,讲的很详细,建议购买阅读. 继承的作用 实现继承的主要作用是: ① 子类实例可以共享超类属性和方法. ②

  • javascript面向对象程序设计实践常用知识点总结

    本文实例讲述了javascript面向对象程序设计实践常用知识点.分享给大家供大家参考,具体如下: 实践一:原型中的引用类型的属性是共享的 var Person = function(){}; Person.prototype = { info:{ "name":"Tom" } } var p1 = new Person(); var p2 = new Person(); p1.info.name = '我是p1'; p2.info.name = '我是p2'; c

  • javascript面向对象创建对象的方式小结

    本文实例讲述了javascript面向对象创建对象的方式.分享给大家供大家参考,具体如下: 方式一:通过内置Object对象的方式创建 然后通过点语法,动态给对象创建属性,方法 var o1 = new Object(); o1.name = 'Tom'; o1.sing = function() { console.log('I am singing'); } 方式二:通过字面量json形式创建对象 var o2 = { "name":"jackson", &qu

随机推荐