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重新播放css动画所遇问题解决
Aug 21 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
浅析Ajax语法
Dec 05 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
jQuery插件之validation插件
Mar 29 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
微信小程序自定义toast实现方法详解【附demo源码下载】
Nov 28 Javascript
解决vue处理axios post请求传参的问题
Mar 05 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
Node.js+Vue脚手架环境搭建的方法步骤
Mar 08 Javascript
jquery插件实现轮播图效果
Oct 19 jQuery
详解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 设计模式之 工厂模式
2008/12/19 PHP
初识laravel5
2015/03/02 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
php封装的验证码类分享
2017/02/26 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
javascript 短路法代码精简
2009/08/20 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
Vue实现验证码功能
2019/12/03 Javascript
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
Python文件和目录操作详解
2015/02/08 Python
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
python在文本开头插入一行的实例
2018/05/02 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
python scipy卷积运算的实现方法
2019/09/16 Python
Python如何访问字符串中的值
2020/02/09 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
房地产推广策划方案
2014/05/19 职场文书
学习型党组织心得体会
2014/09/12 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书