js原型继承四步曲及原型继承图
一:js原型继承四步曲
//js模拟类的创建以及继承
//动物(Animal),有头这个属性,eat方法
//名字这个属性
//猫有名字属性,继承Animal,抓老鼠方法 //第一步:创建父类
function Animal(name){
this.name = name;
}
//给父类添加属性方法
Animal.prototype.eat = function(){
console.log(this.name + " eating..."); }
//第二步:创建子类
function Cat(name){
Animal.call(this,name); }
//第三步:确定继承的关系
Cat.prototype = Object.create(Animal.prototype); //第四步:改造构造器
//改变了某个构造器的原型之后,紧接着的代码一定是改构造器
Cat.prototype.constructor = Cat; Cat.prototype.zhualaoshu = function(){
console.log(this.name + " 抓 老鼠");
} var mao = new Cat("猫");
mao.eat();
mao.zhualaoshu();

二:原型继承图

下图辅助理解

练习提巩固理解
| 函数Foo的__proto的值等于Foo.prototype,对吗? | 不对 |
| Object的prototype可以修改吗?能与不能原因是什么 | 不可以 |
| 顶级constructor是谁? | Function() |
| 顶级原型对象是谁? | Object.prototype |
| 对象的construtor成员是个属性还是个方法? | 方法 |
| Function有没有__proto__,为什么?值等于Object.prototype吗? | 有,是Function.prototype; |
| 所有的构造器的__proto__都等于其对应的prototype | 不对 |
| 创建类形式的继承的四部曲是什么? | 创建父类——>创建子类——>确定继承关系——>改构造器 |
| Function的constructor与prototype值可以修改吗? | 可以 |
| Object.prototype === Object.__proto__吗? | 不对 |
| Function.prototype === Function.__proto__吗? | 是 |
| function F(){}; var f1 = new F();f1.__proto__ === Object.prototype吗? | 不对 |
js原型继承四步曲及原型继承图的更多相关文章
- 三张图搞懂JavaScript的原型对象与原型链 / js继承,各种继承的优缺点(原型链继承,组合继承,寄生组合继承)
摘自:https://www.cnblogs.com/shuiyi/p/5305435.html 对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__pro ...
- [js高手之路]从原型链开始图解继承到组合继承的产生
基于javascript原型链的层层递进查找规则,以及原型对象(prototype)的共享特性,实现继承是非常简单的事情 一.把父类的实例对象赋给子类的原型对象(prototype),可以实现继承 f ...
- JS原型,原型链,类,继承,class,extends,由浅到深
一.构造函数和原型 1.构造函数.静态成员和实例成员 在ES6之前,通常用一种称为构造函数的特殊函数来定义对象及其特征,然后用构造函数来创建对象.像其他面向对象的语言一样,将抽象后的属性和方法封装到对 ...
- JS原型继承和类式继承
前言 一个多月前,卤煮读了一篇翻译过来的外国人写的技术博客.此君在博客中将js中的类(构造)继承和原型继承做了一些比较,并且得出了结论:建议诸位在开发是用原型继承.文中提到了各种原型继承的优点,详细的 ...
- JS创建对象、继承原型、ES6中class继承
面向对象编程:java中对象的两个基本概念:1.类:类是对象的模板,比如说Leader 这个是泛称领导,并不特指谁.2:实例:实例是根据类创建的对象,根据类Leader可以创建出很多实例:liyi,y ...
- js继承之组合继承(结合原型链继承 和 借用构造函数继承)
在我的前两篇文章中,我们已经介绍了 js 中实现继承的两种模式:原型链继承和借用构造函数继承.这两种模式都存在各自的缺点,所以,我们考虑是否能将这二者结合到一起,从而发挥二者之长.即在继承过程中,既可 ...
- javaScript——原型继承四步曲
<script> //js模拟类的创建以及继承 //第一步:创建父类 function Parent(name){ this.name = name; } //给父类添加属性方法 Pare ...
- js继承中,原型属性的继承探究
最近研究了js的继承,看了幻天芒的文章http://www.cnblogs.com/humin/p/4556820.html#3947420,明白了最好是使用apply或call方法来实现继承. 已知 ...
- 【前端知识体系-JS相关】深入理解JavaScript原型(继承)和原型链
1. Javascript继承 1.1 原型链继承 function Parent() { this.name = 'zhangsan'; this.children = ['A', 'B', 'C' ...
随机推荐
- PAT_A1096#Consecutive Factors
Source: PAT A1096 Consecutive Factors (20 分) Description: Among all the factors of a positive intege ...
- HTML —— 表格
复习下关于html中的表格. 基本结构: 表格由 table 标签为父标签进行包裹,可以在 table 上添加几种属性. border : 定义表格的边框. cellspacing : 间距,指单元格 ...
- Android Telephony分析(六) ---- 接口扩展(实践篇)
本文将结合前面五篇文章所讲解的知识,综合起来,实现一个接口扩展的功能.如果还没有阅读过前面五篇文章的内容,请先阅读:<Android Telephony分析(一) — Phone详解 >& ...
- 利用JFileChooser实现文件选择对话框
简单的文件选择对话框: package mypackage;/** * 打开文件和存储文件 */import java.awt.BorderLayout;import java.awt.Contain ...
- springboot中引用配置文件中的参数
首先可以看到这是做微信登陆时候的配置,一般不会写死都是通过配置文件获取,所以,记载配置文件中 那么怎么引用呢: 可以看到直接注入的方式就可以引用了,所以看下面: 进行页面跳转,并且带有参数的, 使用m ...
- XOR linked list--- 异或链表
异或链表的结构 这是一个数据结构.利用计算机的的位异或操作(⊕),来降低双向链表的存储需求. ... A B C D E ... –> next –> next –> next –& ...
- Effective C++之条款2:尽量以const enum inline替换 #define
本文的标题也可以改成“用编译器替换预处理器”: const double AspectRatio = 1.653; //最好使用上述代码替换下述代码: #define ASPECT_RATIO 1.6 ...
- delphi获得文件大小
大概有这些方法可以获得文件大小 FileSizeByName(需要引用IdGlobal单元) GetFileSize FileSize(不能获得正在使用的文件大小) FileSeek TFileStr ...
- jQuery的两把利器
1 jQuery核心函数 * 简称: jQuery函数($/jQuery) * jQuery库向外直接暴露的就是$/jQuery * 引入jQuery库后, 直接使用$即可 * 当函数用: $(xxx ...
- NX二次开发-创建圆弧(圆心-半径)UF_CURVE_create_arc
NX9+VS2012 #include <uf.h> #include <uf_curve.h> #include <uf_ui.h> #include <u ...