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' ...
随机推荐
- leetcode 596 BUG笔记
There is a table courses with columns: student and class Please list out all classes which have more ...
- 剑指offer——570~n-1中缺失的数字
题目:0~n-1中缺失的数字. 一个长度为n-1的递增排序数组中的所有数字都是唯一的,并且每个数字都在范围0~n-1之内. 在范围0~n-1内的n个数字中有且只有一个数字不在该数组中,请找出这个数字. ...
- Ubuntu14.04搭建JSP与Servlet开发环境及其测试详解
一,搭建JDK开发环境 1,在Java官网下载Jdk软件包,我的系统是64位Ubuntu14.04,所以选择jdk-8u25-linux-x64.tar.gz. 2,解压Jdk软件包 tar xvzf ...
- 四(2)、springcloud之Ribbon负载均衡
2.Ribbon负载均衡 Ribbon在工作时分成两步第一步先选择 EurekaServer ,它优先选择在同一个区域内负载较少的server. 第二步再根据用户指定的策略,在从server取到的 ...
- bigger is greater
题目: Lexicographical order is often known as alphabetical order when dealing with strings. A string i ...
- 修改Tomcat的端口号方法
(1).查找conf路径下的server.xml文件,路径如: I: \tomcat6\apache-tomcat-6.0.32\conf\server.xml (2).打开server.xml文 ...
- 自定义实现系统max方法
function MyMath(){ //添加了一个方法 this.getMax=function(){ //所有数字中的最大值 var max=arguments[0]; for(var i=0;i ...
- Vultr账号被锁定的几个常见原因
很多小伙伴使用都在问Vultr账号为什么又是会出现被锁定的情况,今天我们就来了解一下Vultr账号被锁定的几个常见原因. 1.Vultr主机违规使用 按照Vultr主机商的要求,我们的Vultr主机也 ...
- Yii2 : Active Record add Not In condition
$query = MyModel::find()->where(['not in','attribute',$array]); 參考 Yii2 : Active Record add Not I ...
- H5全局属性contenteditable,实现可编辑元素
<div contenteditable="true">这是一段可编辑的段落.请试着编辑该文本.</div> 效果如下: