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 相关文章推荐
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
jquery实现弹出层遮罩效果的简单实例
Mar 03 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
js a标签点击事件
Mar 30 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
vue.js语法及常用指令
Oct 29 Javascript
angular6的响应式表单的实现
Oct 10 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字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
js表单验证实例讲解
2016/03/31 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
JS前端模块化原理与实现方法详解
2020/03/17 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
python绘图模块之利用turtle画图
2021/02/12 Python
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
应届实习生的自我评价范文
2014/01/05 职场文书
机械专业求职信范文
2014/07/15 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
推荐信范文大全
2015/03/27 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书
Django显示可视化图表的实践
2021/05/10 Python
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技
LeetCode189轮转数组python示例
2022/08/05 Python