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 相关文章推荐
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
javascript计时器详解
Feb 28 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
javascript编写简易计算器
May 06 Javascript
JavaScript之map reduce_动力节点Java学院整理
Jun 29 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
JS实现多物体运动的方法详解
Jan 23 Javascript
Vue中this.$router.push参数获取方法
Feb 27 Javascript
Django+vue跨域问题解决的详细步骤
Jan 20 Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 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
基于mysql的bbs设计(三)
2006/10/09 PHP
新手配置 PHP 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
改变Apache端口等配置修改方法
2008/06/05 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
基于PHP遍历数组的方法汇总分析
2013/06/08 PHP
帝国cms常用标签汇总
2015/07/06 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
php获取微信openid方法总结
2019/10/10 PHP
JavaScript 学习笔记(四)
2009/12/31 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
js星星评分效果
2014/07/24 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
python实现ping的方法
2015/07/06 Python
Python 的类、继承和多态详解
2017/07/16 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
Django中的Model操作表的实现
2018/07/24 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
Python实现FM算法解析
2019/06/18 Python
Python错误的处理方法
2020/06/23 Python
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
德国机车企业:FC-Moto
2017/10/27 全球购物
2014年预备党员学习两会心得体会
2014/03/17 职场文书
创业培训计划书
2014/05/03 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
辛德勒的名单观后感
2015/06/03 职场文书
法制主题班会教案
2015/08/13 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python