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 相关文章推荐
另一个javascript小测验(代码集合)
Jul 27 Javascript
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
Jun 21 Javascript
Javascript 构造函数详解
Oct 22 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
js 颜色选择插件
Jan 23 Javascript
js模块加载方式浅析
Aug 12 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
Vuex mutitons和actions初使用详解
Mar 04 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 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
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
高性能JavaScript模板引擎实现原理详解
2015/02/05 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
详解基于webpack搭建react运行环境
2017/06/01 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
vue渲染方式render和template的区别
2020/06/05 Javascript
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
python中迭代器(iterator)用法实例分析
2015/04/29 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
keras K.function获取某层的输出操作
2020/06/29 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
Merrell迈乐澳大利亚网站:购买户外登山鞋
2017/05/28 全球购物
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
大学生村官承诺书
2014/03/28 职场文书
党员大会主持词
2014/04/02 职场文书
2015年教师新年寄语
2014/12/08 职场文书
创业计划书之便利店
2019/09/05 职场文书
golang操作redis的客户端包有多个比如redigo、go-redis
2022/04/14 Golang
python中filter,map,reduce的作用
2022/06/10 Python