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 相关文章推荐
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
js如何判断用户是否是用微信浏览器
Jun 05 Javascript
JavaScript中使用document.write向页面输出内容实例
Oct 16 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
使用post方法实现json往返传输数据的方法
Mar 30 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 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时间戳与日期的转换
2013/06/06 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
JavaScript 变量基础知识
2009/11/07 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
2011/09/17 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
python判断字符串是否包含子字符串的方法
2015/03/24 Python
在Docker上开始部署Python应用的教程
2015/04/17 Python
python字符串连接方法分析
2016/04/12 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
Python向Excel中插入图片的简单实现方法
2018/04/24 Python
django创建超级用户过程解析
2019/09/18 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
linux面试题参考答案(9)
2016/01/29 面试题
简历自荐信
2013/12/02 职场文书
农林环境专业求职信
2014/03/13 职场文书
三八红旗集体先进事迹材料
2014/05/22 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
Nginx配置Https安全认证的实现
2021/05/26 Servers