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 相关文章推荐
通过JAVAScript实现页面自适应
Jan 19 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
jQuery 对Select的操作备忘记录
Jul 04 Javascript
浅谈JavaScript function函数种类
Dec 29 Javascript
详解jQuery中的元素的属性和相关操作
Aug 14 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
原生js实现获取form表单数据代码实例
Mar 27 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
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
第十三节 对象串行化 [13]
2006/10/09 PHP
如何使用脚本模仿登陆过程
2006/11/22 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
jWiard 基于JQuery的强大的向导控件介绍
2011/10/28 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
JS中Location使用详解
2015/05/12 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
Vue弹出菜单功能的实现代码
2018/09/12 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
[00:43]TI7不朽珍藏III——幽鬼不朽展示
2017/07/15 DOTA
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
python3.4实现邮件发送功能
2018/05/28 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
如何清空python的变量
2020/07/05 Python
详解python的变量缓存机制
2021/01/24 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
如何唤起类中的一个方法
2013/11/29 面试题
土木工程毕业生自荐信
2013/11/12 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
财务会计求职信范文
2015/03/20 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书