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基础篇
Nov 13 Javascript
Javascript 面向对象之重载
May 04 Javascript
基于jQuery的简单九宫格实现代码
Aug 09 Javascript
jQuery function的正确书写方法
Aug 02 Javascript
Jquery动态添加及删除页面节点元素示例代码
Jun 16 Javascript
jquery validate demo 基础
Oct 29 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
JS实现网站楼层导航效果代码实例
Jun 16 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
PHPlet在Windows下的安装
2006/10/09 PHP
PHP性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
form自动提交实例讲解
2017/07/10 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
python文件和目录操作方法大全(含实例)
2014/03/12 Python
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
python获取从命令行输入数字的方法
2015/04/29 Python
Python学生信息管理系统修改版
2018/03/13 Python
python版本五子棋的实现代码
2018/12/11 Python
Python pip配置国内源的方法
2020/02/14 Python
什么是python的自省
2020/06/21 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
医药专业推荐信
2013/11/15 职场文书
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
安踏广告词改编版
2014/03/21 职场文书
地方白酒代理协议书
2014/10/25 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
2015大学迎新标语
2015/07/16 职场文书
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers