JS原型继承四步曲及原型继承图一览


Posted in Javascript onNovember 28, 2017

一: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();

JS原型继承四步曲及原型继承图一览 

二: 原型继承图


JS原型继承四步曲及原型继承图一览

下图辅助理解

JS原型继承四步曲及原型继承图一览

练习提巩固理解、

函数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 相关文章推荐
异步加载script的代码
Jan 12 Javascript
在浏览器窗口上添加遮罩层的方法
Nov 12 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 Javascript
js实现黑白div块画空心的图形
Dec 13 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
weebox弹出窗口不居中显示的解决方法
Nov 27 #Javascript
Dropify.js图片宽高自适应的方法
Nov 27 #Javascript
jfinal与bootstrap的登出实战详解
Nov 27 #Javascript
JQuery 又谈ajax局部刷新
Nov 27 #jQuery
Bootstrap实现翻页效果
Nov 27 #Javascript
jQuery Datatables表头不对齐的解决办法
Nov 27 #jQuery
JS使用贪心算法解决找零问题示例
Nov 27 #Javascript
You might like
PHP速成大法
2015/01/30 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
2016/10/09 Javascript
ajax异步请求详解
2017/01/06 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
python Pandas 读取txt表格的实例
2018/04/29 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
python集合删除多种方法详解
2020/02/10 Python
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
C语言笔试题回忆
2015/04/02 面试题
个人简历中的自我评价范例
2013/10/29 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
协议书与合同的区别
2014/04/18 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书