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中POSITIVE_INFINITY值的使用
Jun 05 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
jQuery简单设置文本框回车事件的方法
Aug 01 Javascript
js友好的时间返回函数
Aug 24 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
微信小程序合法域名配置方法
May 06 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 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
PhpMyAdmin中无法导入sql文件的解决办法
2010/01/08 PHP
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
解析php如何将日志写进syslog
2013/06/28 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
javascript替换已有元素replaceChild()使用介绍
2014/04/03 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
Python监控主机是否存活并以邮件报警
2015/09/22 Python
python中lambda()的用法
2017/11/16 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
如何获取Python简单for循环索引
2019/11/21 Python
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
什么是Web Service?
2012/07/25 面试题
建筑公司文秘岗位职责
2013/11/29 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
对照检查剖析材料
2014/09/30 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书
文体活动总结
2015/02/04 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
SQL基础的查询语句
2021/11/11 MySQL
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android