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 相关文章推荐
jQuery数组处理方法汇总
Jun 20 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
无限循环轮播图之运动框架(原生JS实现)
Oct 01 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 Javascript
JS自定义右键菜单实现代码解析
Jul 16 Javascript
vue 给数组添加新对象并赋值
Apr 20 Vue.js
详解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中的时间处理
2006/10/09 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
使用jquery清空、复位整个输入域
2015/04/02 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
python通过smpt发送邮件的方法
2015/04/30 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
python turtle 绘制太极图的实例
2019/12/18 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
python函数中将变量名转换成字符串实例
2020/05/11 Python
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
EJB与JAVA BEAN的区别
2016/08/29 面试题
儿科护士自我鉴定
2013/10/14 职场文书
自我评价怎么写好呢?
2013/12/05 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
端午节活动总结报告
2015/02/11 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
安全教育培训心得体会
2016/01/15 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers