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 学习笔记 选择器之六
Jul 23 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
解释&&和||在javascript中的另类用法
Jul 28 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
老生常谈JavaScript数组的用法
Jun 10 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 Javascript
深入理解 JS 垃圾回收
Jun 03 Javascript
JS控制GIF图片的停止与显示
Oct 24 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
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
详解webpack 多页面/入口支持&公共组件单独打包
2017/06/29 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
python numpy 按行归一化的实例
2019/01/21 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
python批量修改ssh密码的实现
2019/08/08 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
英国门把手公司:Door Handle Company
2019/05/12 全球购物
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
初中三年学生的学习自我评价
2013/11/13 职场文书
优秀干部获奖感言
2014/01/31 职场文书
共产党员公开承诺书范文
2014/03/28 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
教师听课评语大全
2014/12/31 职场文书
格林童话读书笔记
2015/06/30 职场文书
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python