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 相关文章推荐
xml分页+ajax请求数据源+dom取结果实例代码
Oct 31 Javascript
Javascript 作用域使用说明
Aug 13 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
Jun 10 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
jquery 获取select数组与name数组长度的实现代码
Jun 20 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
微信端开发--登录小程序步骤
Jan 11 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 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
需要注意的几个PHP漏洞小结
2012/02/05 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
js常见表单应用技巧
2008/01/09 Javascript
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
jquery 插件开发备注
2010/08/27 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
js分页代码分享
2014/04/28 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
Python实现的数据结构与算法之双端队列详解
2015/04/22 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
python如何使用腾讯云发送短信
2020/09/17 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
小学生开学第一课活动方案
2014/03/27 职场文书
大学生简历求职信
2014/06/24 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
劳模先进事迹材料
2014/12/24 职场文书
职工宿舍管理制度
2015/08/05 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
九年级化学教学反思
2016/02/22 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
MySQL日期时间函数知识汇总
2022/03/17 MySQL
MySQL 数据表操作
2022/05/04 MySQL