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 相关文章推荐
编写兼容IE和FireFox的脚本
May 18 Javascript
javascript parseInt() 函数的进制转换注意细节
Jan 08 Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
js中prototype用法详细介绍
Nov 14 Javascript
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
将json对象转换为字符串的方法
Feb 20 Javascript
解析javascript瀑布流原理实现图片滚动加载
Mar 10 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
BootStrap TreeView使用实例详解
Nov 01 Javascript
基于element-ui的rules中正则表达式
Sep 04 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 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
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
微信支付的开发流程详解
2016/09/13 PHP
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
js的一些常用方法小结
2011/06/29 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
利用python获取Ping结果示例代码
2017/07/06 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
python中提高pip install速度
2020/02/14 Python
浅谈Python中的模块
2020/06/10 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
美国内衣品牌:Leonisa
2016/08/14 全球购物
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
事业单位公务员的职业生涯规划
2014/01/15 职场文书
校长师德表现自我评价
2015/03/05 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS