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面向对象--继承 (超简单易懂,小白专属)的更多相关文章
- JavaScript面向对象—继承的实现
JavaScript面向对象-继承的实现 前言 面向对象的三大特性:封装.继承和多态.上一篇我们简单的了解了封装的过程,也就是把对象的属性和方法封装到一个函数中,这一篇讲一下JavaScript中继承 ...
- javaScript面向对象继承方法经典实现
转自原文javaScript面向对象继承方法经典实现 JavaScript的出现已经将近20多年了,但是对这个预言的褒贬还是众说纷纭.很多人都说JavaScript不能算是面向对象的变成语言.但是Ja ...
- JavaScript面向对象继承方法
JavaScript的出现已经将近20多年了,但是对这个预言的褒贬还是众说纷纭.很多人都说JavaScript不能算是面向对象的变成语言.但是JavaScript的类型非常松散,也没有编译器.这样一来 ...
- JavaScript 面向对象继承详解
题记 由于js不像java那样是完全面向对象的语言,js是基于对象的,它没有类的概念.所以,要想实现继承,一般都是基于原型链的方式: 一.继承初探 大多数JavaScript的实现用 __proto_ ...
- Javascript 面向对象-继承
JavaScript虽然不是面向对象的语言,但是我们通过构造可以让其支持面向对象,从而实现继承.重写等面向对象的特性.具体代码如下: //创建类Person function Person(age,n ...
- javascript面向对象——继承
javascript和其他语言相比,它没有真正意义上的继承,也不能从一个父类extends,要实现它的继承可以通过其他方式来实现: 步骤:1.继承父类的属性 2.继承父类的原型 下面就以一个拖拽为例子 ...
- JavaScript 面向对象继承的实现
<script type="text/javascript"> function Animal () { this.species="Animal" ...
- js 继承的简单易懂小例子
js 继承 今天主要说原型链继承.构造继承.组合继承三种常用继承方式,分享一下我的理解. 原型链继承例子1 //原型继承function A(name){ this.name = name;}func ...
- javascript面向对象继承和原型
一.理解什么是对象:任何东西都可以是对象,对象就是一组无序属性的集合 对象具有属性和方法1.1 属性的类型属性内部又定义了两种属性:数据属性和访问器属性 (1)数据属性:有4个描述的行为 Config ...
随机推荐
- centos7部署openstack-ocata
1.前言 本文旨在记录本人的一个实验过程,因为其中有一些坑,方便以后回顾查询. 其中限于篇幅(大部分是配置部分)有些内容省略掉了,官网都有,各位如果是安装部署的话可以参考官网,不建议使用本文. 以下是 ...
- Open-Domain QA -paper
Open-domain QA Overview The whole system is consisted with Document Retriever and Document Reader. T ...
- 意识科学初步:David Chalmers的简单问题与困难问题
这是第一篇关于意识科学的内容.主要谈一下阅读大卫查莫斯的几篇论文的一些观点和思考. 论文作者简介(摘自wiki): David John Chalmers (born 20 April 1966) i ...
- python爬虫实践(一)
最近在学习爬虫,学完后想实践一下,所以现在准备爬取校花网的一部分图片 第一步,导入需要的库 from urllib import request #用于处理request请求和获得响应 from ur ...
- Pycharm安装+python安装+环境配置
Pycharm 工具: 1.安装jdk(64位):jdk-8u65-windows-x64.exe 路径:C:\Program Files\Java(默认路径) 2.配置环境 步骤一: 系统变量→新建 ...
- python学习:continue及break使用
continue及break使用 #continue 作用:结束本次循环,继续下次循环#break 作用:跳出整个当次循环 for i in range(10): if i < 5: conti ...
- Vue(三十)公共组件
以 分页 组件为例:(根据自己具体业务编写) 1.pagination.vue <template> <!-- 分页 --> <div class="table ...
- win10企业版永久激活方法
步骤: 1.右键点击桌面左下角"windows"图标,点击打开“命令提示符” 2.复制命令:slmgr.vbs /upk,按回车确定,弹出窗口显示“成功地卸载了产品密钥” 3.复制 ...
- 刚发现 CSS 还存在一个命名规范 B.E.M
Block !误区:这个block并非inline-block里的block,而是将所有东西都划分为一个独立的模块,一个header是block,header里嵌套的搜索框是block,甚至一个ico ...
- dx.jar文件问题,有没有同学知道怎么解决呀,这一步没法解决,后面就没办法跟着做了
Java Code 123456789101112 dx.jar文件问题,有没有同学知道怎么解决呀,这一步没法解决 - test] Unknown error: Unable to build: ...