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 相关文章推荐
JS增加行复制行删除行的实现代码
Nov 09 Javascript
ECMAScript 5中的属性描述符详解
Mar 02 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
JavaScript引用类型Object常见用法实例分析
Aug 08 Javascript
vue键盘事件点击事件加native操作
Jul 27 Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 Javascript
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中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
理解javascript回调函数
2014/12/28 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
微信JSAPI Ticket接口签名详解
2020/06/28 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
python使用Berkeley DB数据库实例
2014/09/26 Python
python基础教程之五种数据类型详解
2017/01/12 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
Python Flask框架扩展操作示例
2019/05/03 Python
简单了解django orm中介模型
2019/07/30 Python
python如何将多个PDF进行合并
2019/08/13 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
家长会主持词开场白
2014/03/18 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS