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调用webservice中的方法实现思路及代码
Feb 25 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
Js nodeType 属性全面解析
Nov 14 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
JS DOM实现鼠标滑动图片效果
Sep 17 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 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 JSON格式数据交互实例代码详解
2011/01/13 PHP
将word转化为swf 如同百度文库般阅读实现思路及代码
2013/08/09 PHP
PHP实现简易blog的制作
2016/10/24 PHP
js 动态选中下拉框
2009/11/26 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
[01:09:24]Ti4开幕式
2014/07/19 DOTA
python中global用法实例分析
2015/04/30 Python
Python 文件管理实例详解
2015/11/10 Python
Python实现图片转字符画的示例代码
2017/08/21 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
django中related_name的用法说明
2020/05/20 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
写演讲稿要注意的六件事
2014/01/14 职场文书
《雾凇》教学反思
2014/02/17 职场文书
2015毕业实习推荐信
2015/03/23 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫