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 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
JavaScript 学习笔记(六)
Dec 31 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
浅谈javascript中的 “ && ” 和 “ || ”
Feb 02 Javascript
JS中静态页面实现微信分享功能
Feb 06 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
详解原生JS动态添加和删除类
Mar 26 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 Javascript
二维码条形码生成的JavaScript脚本库
Jul 07 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 for 循环语句使用方法详细说明
2010/05/09 PHP
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
JS 自动安装exe程序
2008/11/30 Javascript
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
layui中table表头样式修改方法
2018/08/15 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
Python import用法以及与from...import的区别
2015/05/28 Python
在Django的模板中使用认证数据的方法
2015/07/23 Python
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
Python 互换字典的键值对实例
2019/02/12 Python
Python小进度条显示代码
2019/03/05 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
澳大利亚百货公司:David Jones
2018/02/08 全球购物
师说教学反思
2014/02/07 职场文书
文明寝室申报材料
2014/05/12 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
2015年党支部公开承诺书
2015/01/22 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书