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 相关文章推荐
JS 有名函数表达式全面解析
Mar 19 Javascript
一个可绑定数据源的jQuery数据表格插件
Jul 17 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
sea.js常用的api简易文档
Nov 15 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
Jan 01 Javascript
jquery实现百叶窗效果
Jan 12 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
Nov 06 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
详解Vue router路由
Nov 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
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
PHP array_shift()用法实例分析
2019/01/07 PHP
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
js 3种归并操作的实例代码
2013/10/30 Javascript
Prototype框架详解
2015/11/25 Javascript
js自定义回调函数
2015/12/13 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
Django之腾讯云短信的实现
2020/06/12 Python
python实例化对象的具体方法
2020/06/17 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
软件测试有哪些?什么是配置项?
2012/02/12 面试题
法制宣传教育方案
2014/05/09 职场文书
离婚协议书范本2014
2014/10/27 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python