js类的继承定义与用法分析


Posted in Javascript onJune 21, 2019

本文实例讲述了js类的继承定义与用法。分享给大家供大家参考,具体如下:

如何实现类的继承呢?

有如下2个构造函数:

function PeopleClass(){
  this.type = "人";
};
PeopleClass.ptototype = {
  getType:function(){
    alert("这是一个人");
  }
};
function StudentClass(name,sex){
  this.name = name;
  this.sex = sex;
};

如何让『学生』对象来继承『人』对象呢?可使用apply方法将父对象的构造函数绑定在子对象上,代码如下:

function PeopleClass(){
  this.type = "人";
};
PeopleClass.ptototype = {
  getType:function(){
    alert("这是一个人");
  }
};
function StudentClass(name,sex){
  PeopleClass.apply(this,arguments);
  this.name = name;
  this.sex = sex;
};
var stu = new StudentClass("lily","男");
alert(stu.type); //[人]

从运行的结果来看,StudentClass继承了PeopleClass的属性『人』。

而方法的继承,只要循环使用父对象的prototype进行复制,即可达到继承的目的。方法如下:

function StudentClass(name,sex){
  PeopleClass.apply(this,arguments);
  var prop;
  for(prop in PeopleClass.prototype){
    var proto = this.constructor.prototype;
    if(!proto[prop]){
      proto[prop] = PeopleClass.prototype[prop];
    }
    proto[prop]["super"] = PeopleClass.prototype;
  }
  this.name = name;
  this.sex = sex;
};
var stu = new StudentClass("lily","女");
alert(stu.type); //[人]
stu.getType(); //[这是一个人]

以上就是js中继承的实现。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
几款极品的javascript压缩混淆工具
May 16 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 Javascript
jQuery EasyUI 入门必看
Jun 03 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
vue如何从接口请求数据
Jun 22 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 Javascript
js实现简单扫雷
Nov 27 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
Oct 28 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 Javascript
js中值引用和地址引用实例分析
Jun 21 #Javascript
微信小程序实现消息框弹出动画
Apr 18 #Javascript
前端Electron新手入门教程详解
Jun 21 #Javascript
javascript实现自由编辑图片代码详解
Jun 21 #Javascript
JS中超越现实的匿名函数用法实例分析
Jun 21 #Javascript
微信小程序实现圆形进度条动画
Nov 18 #Javascript
JavaScript迭代器的含义及用法
Jun 21 #Javascript
You might like
Zerg建筑一览
2020/03/14 星际争霸
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
php中的boolean(布尔)类型详解
2013/10/28 PHP
thinkPHP查询方式小结
2016/01/09 PHP
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
JavaScript实现打字游戏
2021/02/19 Javascript
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
Python过滤序列元素的方法
2020/07/31 Python
美国户外服装和装备购物网站:Outland USA
2020/03/22 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
卫校毕业生自我鉴定
2014/09/28 职场文书
圆明园观后感
2015/06/03 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书