js继承实现方法详解


Posted in Javascript onDecember 16, 2016

本文实例讲述了js继承实现方法。分享给大家供大家参考,具体如下:

var animal=function(name){ //构造函数
  this.name=name;
  this.sayhello=function(){
  alert("hi我是"+this.name);
  };
}
animal.prototype.shout=function(){ //prototype主要作用:给类增加一个新的属性或函数
  alert(this.name+"正在叫!");
};
animal.prototype.game=function(){
  alert(this.name+"正在玩耍!");
};
var dog=new animal("小黑");  //实例化
dog.sayhello();
dog.shout();
dog.game();

一、原型继承

var animal=function(name){
  this.name=name;
  this.sayhello=function(){
  alert("hi我是"+this.name);
  };
}
animal.prototype.shout=function(){
  alert(this.name+"正在叫!");
};
animal.prototype.game=function(){
  alert(this.name+"正在玩耍!");
};
var Dog=function(name){
  this.name=name;
  this.shout=function(){   //重写父类的函数
  alert(this.name+"汪汪叫!");
  }
}
Dog.prototype=Cat.prototype=new animal();
var dog=new Dog("小黑");
dog.sayhello();
dog.shout();
dog.game();
var cat=new Cat("小白");
cat.sayhello();
cat.shout();
cat.game();

animal是父类(或超类),要继承于谁,谁就是父类(超类)

改进:专门写个函数,用来实现继承

var animal=function(name){
  this.name=name;
  this.sayhello=function(){
  alert("hi我是"+this.name);
  };
}
Function.prototype.extends=function(superclass){      //extends是保留关键字,不能拿出来单独使用,如var extends=function(){},而这里可以使用是因为他做为函数的属性添加上去
  this.prototype=new superclass();
};
animal.prototype.shout=function(){
  alert(this.name+"正在叫!");
};
animal.prototype.game=function(){
  alert(this.name+"正在玩耍!");
};
var Dog=function(name){
  this.name=name;
  this.shout=function(){
  alert(this.name+"汪汪叫!");
  }
}
Dog.extends(animal);
var dog=new Dog("小黑");
dog.sayhello();
dog.shout();
dog.game();
var dog=new Dog("小白");
dog.sayhello();
dog.shout();
dog.game();

二、call,apply继承(不完全继承)

var animal=function(name){
  this.name=name;
  this.sayhello=function(){
  alert("hi我是"+this.name);
  };
}
animal.prototype.shout=function(){
  alert(this.name+"正在叫!");
};
animal.prototype.game=function(){
  alert(this.name+"正在玩耍!");
};
var Dog=function(name){
  animal.call(this,name);
}
var dog=new Dog("小黑");
dog.sayhello();
dog.shout();
dog.game();

输出:hi我是小黑

TypeError: dog.shout is not a function

通过call(apply)的方式,只能改变其this指向,通过prototype添加进去的方法,他是无法直接继承的

总结:call,apply这种方式的继承适用于没有prototype的类或者不需要继承prototype所添加属性或函数的类,因为call和apply函数只是实现了方法的替换,而没有对对象的属性和函数进行复制操作

原型继承,则可以继承所有的属性和函数

继承的属性,只有删除原有属性,才会输出继承的属性

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
完美解决IE低版本不支持call与apply的问题
Dec 05 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
微信小程序之GET请求的实例详解
Sep 29 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 Javascript
实例讲解vue源码架构
Jan 24 Javascript
微信小程序实现录音功能
Nov 22 Javascript
详解jQuery简单的表格应用
Dec 16 #Javascript
JS中parseInt()和map()用法分析
Dec 16 #Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 #Javascript
JS数字千分位格式化实现方法总结
Dec 16 #Javascript
jquery插件锦集【推荐】
Dec 16 #Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 #Javascript
JS实现字符串转驼峰格式的方法
Dec 16 #Javascript
You might like
php empty函数 使用说明
2009/08/10 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
javascript编程起步(第五课)
2007/02/27 Javascript
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
vue-cli webpack 引入swiper的操作方法
2018/09/15 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
Python简单实现控制电脑的方法
2018/01/22 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
python实现二维数组的对角线遍历
2019/03/02 Python
numpy.random模块用法总结
2019/05/27 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
Ruby如何定义一个类
2012/10/08 面试题
安全横幅标语
2014/06/09 职场文书
大学生安全责任书
2014/07/25 职场文书
2014年班级工作总结
2014/11/14 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python