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滑动门代码
Dec 19 Javascript
javascript中字符串的定义示例代码
Dec 19 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 Javascript
jquery常用特效方法使用示例
Apr 25 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
浅谈Vue render函数在ElementUi中的应用
Sep 06 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 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
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
利用types增强vscode中js代码提示功能详解
2017/07/07 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
工作中常用js功能汇总
2020/11/07 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
js实现筛选功能
2020/11/24 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
Python装饰器的应用场景代码总结
2020/04/10 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
Android面试题附答案
2014/12/08 面试题
联欢晚会主持词
2014/03/25 职场文书
租赁意向书范本
2014/04/01 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
企业贷款委托书格式
2014/09/12 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
python中pymysql包操作数据库方法
2022/04/19 Python
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android
css弧边选项卡的项目实践
2023/05/07 HTML / CSS