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 相关文章推荐
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
Jan 24 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 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
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
NT IIS下用ODBC连接数据库
2006/10/09 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
多种jQuery绑定事件的实现方式
2016/06/13 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
Python使用django获取用户IP地址的方法
2015/05/11 Python
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
Python实现随机漫步功能
2018/07/09 Python
Django实现跨域的2种方法
2019/07/31 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
请解释virtual关键字的含义
2015/06/17 面试题
出纳员的岗位职责
2014/02/22 职场文书
社区居务公开实施方案
2014/03/27 职场文书
个人培训自我鉴定
2014/03/28 职场文书
幼儿园感谢信
2015/01/21 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
2015年档案室工作总结
2015/05/23 职场文书
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript
Python 数据可视化之Seaborn详解
2021/11/02 Python
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技