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做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
js arguments,jcallee caller用法总结
Nov 30 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
深入理解js中的加载事件
Feb 08 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 Javascript
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
Js利用正则表达式去除字符串的中括号
Nov 23 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函数(简单整理)
2010/04/30 PHP
兼容性最强的PHP生成缩略图的函数代码(修改版)
2011/01/18 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
php向js函数传参的几种方法
2014/08/10 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
PHP常见数组排序方法小结
2018/08/20 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
Vue代码整洁之去重方法整理
2019/08/06 Javascript
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
台湾母婴用品购物网站:Infant婴之房
2018/06/15 全球购物
高中数学教学反思
2014/01/30 职场文书
个人安全生产承诺书
2014/05/22 职场文书
分公司经理任命书
2014/06/05 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
廉洁自律个人总结
2015/02/14 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
会议主持词通用版
2019/04/02 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android