【转】js原型链与继承
原文链接:https://blog.csdn.net/u012468376/article/details/53127929
一、继承的概念
继承是所有的面向对象的语言最重要的特征之一。大部分的oop语言的都支持两种继承:接口继承和实现继承。比如基于类的编程语言Java,对这两种继承都支持。从接口继承抽象方法 (只有方法签名),从类中继承实例方法。
但是对JavaScript来说,没有类和接口的概念(ES6之前),所以只支持实现继承,而且继承在 原型链 的基础上实现的。等了解过原型链的概念之后,你会发现继承其实是发生在对象与对象之间。这是与其他编程语言很大的不同。
二、原型链的概念
在JavaScript中,将原型链实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法
再回顾下,构造函数、原型(对象)和对象之间的关系。每个构造函数都有一个属性 prototype 指向一个原型对象,每个原型对象也有一个属性 constructor 指向函数,通过new 构造函数() 创建出来的对象内部有一个不可见的属性[[prototype]]指向构造函数的原型。当每次访问对象的属性和方法的时候,总是先从p1中找,找不到则再去p1指向的原型中找。
2.1 更换构造函数的原型
原型其实就是一个对象,只是默认情况下原型对象是浏览器会自动帮我们创建的,而且自动让构造函数的 prototype 属性指向这个自动创建的原型对象。
其实我们完全可以把原型对象更换成一个我们自定义类型的对象。
看下面的代码:
说明:
1、定义Son构造函数后,我们没有再使用Son的默认原型,而是把他的默认原型更换成了Father类型对象。
2、这时,如果这样访问 son1.name, 则先在son1中查找name属性,没有然后去他的原型( Father对象)中找到了,所以是"马云"。
3、如果这样访问 son1.giveMoney(), 则现在son1中这个方法,找不到去他的原型中找,仍然找不到,则再去这个原型的原型中去找,然后在Father的原型对象找到了。
4、从图中可以看出来,在访问属性和方法的时候,查找的顺序是这样的:对象->原型->原型的原型->…->原型链的顶端。 就像一个链条一样,这样由原型连成的"链条",就是我们经常所说的原型链。
5、从上面的分析可以看出,通过原型链的形式就完成了JavaScript的继承。
2.2 默认顶端原型
其实上面原型链还缺少一环。
在 JavaScript 中所有的类型如果没有指明继承某个类型,则默认是继承的 Object 类型。这种 默认继承也是通过原型链的方式完成的。
下面的图就是一个完整的原型链:
说明:
1、原型链的顶端一定是Object的原型对象。这也是为什么我们随意创建一个对象,就有很多方法可以调用,其实这些方法都是来自Object的原型对象。
2、通过对象访问属性方法的时候,一定是会通过原型链来查找的,直到原型链的顶端。
3、一旦有了继承,就会出现多态的情况。假设需要一个Father类型的数据,那么你给一个Father对象,或Son对象都是没有任何问题的。而在实际执行的过程中,一个方法的 具体执行结果,就看在原型链中的查找过程了。给一个实际的Father对象则从Fahter的原型链中查找,给一个实际的Son则从Son的原型链中查找。
4、因为继承的存在,Son的对象,也可以看出Father类型的对象和Object类型的对象。 子类型对象可以看出一个特殊的父类型对象。
2.3 测试数据的类型
到目前为止,我们有3中方法来测试数据的类型。
- **typeof:**一般用来测试简单数据类型和函数的类型。如果用来测试对象,则会一直返回object,没有太大意义。
3.1 借用的方式
借用构造函数调用继承,又叫伪装调用继承或冒充调用继承。虽然有了继承两个子,但是这种方法从本质上并没实现继承,只是完成了构造方法的调用而已。
使用call或apply这两个方法完成函数借调。这两个方法的功能是一样的,只有少许的区别(暂且不管)。功能都是更改一个构造方法内部的this指向到指定的对象上。
看下面的代码:
四、组合继承
组合函数利用了原型继承和构造函数借调继承的优点,组合在一起。成为了使用最广泛的一种继承方式。
1、组合继承是我们实际使用中最常用的一种继承方式。
2、可能有个地方有些人会有疑问:Son.prototype = new Father( );这不照样把父类型的属性给放在子类型的原型中了吗,还是会有共享问题呀。但是不要忘记了,我们在子类型的构造函数中借调了父类型的构造函数,也就是说,子类型的原型中有的属性,都会被子类对象中的属性给覆盖掉。就是这样的。
【转】js原型链与继承的更多相关文章
- js原型链与继承(初体验)
js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解. 首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询 ...
- 深入理解JS原型链与继承
我 觉得阅读精彩的文章是提升自己最快的方法,而且我发现人在不同阶段看待同样的东西都会有不同的收获,有一天你看到一本好书或者好的文章,请记得收藏起来, 隔断时间再去看看,我想应该会有很大的收获.其实今天 ...
- JS原型链与继承别再被问倒了
原文:详解JS原型链与继承 摘自JavaScript高级程序设计: 继承是OO语言中的一个最为人津津乐道的概念.许多OO语言都支持两种继承方式: 接口继承 和 实现继承 .接口继承只继承方法签名,而实 ...
- js 原型链和继承(转)
在理解继承之前,需要知道 js 的三个东西: 什么是 JS 原型链 this 的值到底是什么 JS 的 new 到底是干什么的 1. 什么是 JS 原型链? 我们知道 JS 有对象,比如 var ob ...
- 小谈js原型链和继承
原型(prototype)在js中可是担当着举足轻重的作用,原型的实现则是在原型链的基础上,理解原型链的原理后,对原型的使用会更加自如,也能体会到js语言的魅力. 本文章会涉及的内容 原型及原型对象 ...
- js原型链和继承
在了解js原型链之前构造函数.原型对象.对象实例这几种概念必须要明白. 1. 创建对象有几种方法 //原型链指向objectvar o1={name:'o1'}; var o11=new Object ...
- js 原型链与继承
var A = function(){ this.name="xiaoming"; } A.prototype.age=9; var a = new A(); console.lo ...
- js原型链、继承、this指向等老生常谈却依然不熟的知识点——记录解析
开始记录学习过程—— 很详细的解析过程——https://juejin.im/post/5c72a1766fb9a049ea3993e6 借鉴阅读——https://github.com/KieSun ...
- js原型链+继承 浅析
名称: prototype--原型对象 __proto__--属性 原型链与继承网上搜索定义,看起来挺绕的 .先说继承: 所有的对象实例都可以共享原型对象包含的属性和方法 例如一个实例A ...
随机推荐
- Linux学习:使用 procrank 测量系统内存使用情况
程序员应该了解一个基本问题:我的程序使用了多少内存?这可能是一个简单的问题,但是对于像Linux这样的虚拟内存操作系统,答案是相当复杂的,因为top和ps给出的数字不能简单相加.进程中两个最常见的内存 ...
- Smarty的分页实现
Smarty中的分页有很多方法.1.使用Smarty的分页插件,如Pager,pagnition,sliding_page等,不过感觉都不是太好,几乎都有一些Bug.有兴趣试用和自己去改进的朋友可以看 ...
- 用VLC读取摄像头产生RTSP流,DSS侦听并转发(二)
用VLC读取摄像头产生RTSP流,DSS侦听并转发(二) 之前介绍过<用VLC读取摄像头产生RTSP流,DSS主动取流转发(一)>本文介绍另一种方法. 摄像机地址是192.1.101.51 ...
- JAVA NIO学习笔记二 频道和缓冲区
Java NIO 频道 Java NIO渠道类似于流,他们之间具有一些区别的: 您可以读取和写入频道.流通常是单向(读或写). 通道可以异步读取和写入数据. 通道常常是读取或写入缓冲区. 如上所述,您 ...
- 读rfc HTTP 协议
这是IETF ( 国际互联网工程任务组(The Internet Engineering Task Force,简称 IETF))制定的协议之一. 互联网工程任务组,成立于1985年底,是全球互联网最 ...
- IDEA debug漏洞第一篇(weblogic,cve-2017-10271)
在weblogic.wsee.jaxws.WLSServletAdapter的129行打点 if (var2.getMethod().equals("GET") || var2.g ...
- shell学习笔记3-后台执行命令
cron 系统调度进程,使用它在每天的某时间或一周.一月的不同时间运行 at 使用它在一个特点的时间允许一些特殊的作业 & 使用它在后台允许一个占用时间不长的进程 Nohup 使用它在后台运行 ...
- mysql 全表扫描场景
全表扫描是数据库搜寻表的每一条记录的过程,直到所有符合给定条件的记录返回为止.通常在数据库中,对无索引的表进行查询一般称为全表扫描:然而有时候我们即便添加了索引,但当我们的SQL语句写的不合理的时候也 ...
- Reactor系列(三)创建Flux,Mono(续)
创建Mono 视频讲解:https://www.bilibili.com/video/av78944069/ FluxMonoTestCase.java package com.example.rea ...
- shell top
top -bn1 它表示非动态打印系统资源使用情况,即一次性全部把所有信息输出出来而非动态显示,可以用在shell脚本中