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 相关文章推荐
jquery ready函数源代码研究
Dec 06 Javascript
JavaScript编程开发中的五个实用小技巧
Jul 22 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
jquery插件corner实现圆角边框的方法
Mar 09 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
javascript表单正则应用
Feb 04 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 Javascript
select标签设置默认选中的选项方法
Mar 02 Javascript
总结javascript三元运算符知识点
Sep 28 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 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执行.SQL文件
2013/07/05 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
php如何连接sql server
2015/10/16 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
JavaScript游戏之优化篇
2010/11/08 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
JS实现密码框效果
2020/09/10 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
Python实现高效求解素数代码实例
2015/06/30 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
django rest framework使用django-filter用法
2020/07/15 Python
CSS3 Calc实现滚动条出现页面不跳动问题
2017/09/14 HTML / CSS
.net面试题
2016/09/17 面试题
制药工程专业应届生求职信
2013/09/24 职场文书
商务英语专业自荐信
2013/10/14 职场文书
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
5s推行计划书
2014/05/06 职场文书
单位承诺书格式
2014/05/21 职场文书
外贸会计专业自荐信
2014/06/22 职场文书
医药销售自我评价200字
2014/09/11 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python