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获取地址栏参数的小例子
Aug 23 Javascript
JS下拉缓冲菜单示例代码
Aug 30 Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
Vue.js中数据绑定的语法教程
Jun 02 Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
Vue开发环境跨域访问问题
Jan 22 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
Terran兵种介绍
2020/03/14 星际争霸
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
神经网络(BP)算法Python实现及应用
2018/04/16 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
python批量下载抖音视频
2019/06/17 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
python程序如何进行保存
2020/07/03 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
物流经理自我评价
2013/09/23 职场文书
电子商务专业个人的自我评价分享
2013/10/29 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
会计专业自我评价
2014/02/12 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
运动会加油稿100字
2014/09/19 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
市场部岗位职责
2015/02/12 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python