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 相关文章推荐
基于jQuery的获取标签名的代码
Jul 16 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
javascript学习笔记(七)Ajax和Http状态码
Oct 08 Javascript
node.js中的fs.readlink方法使用说明
Dec 17 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
Vue中fragment.js使用方法小结
Feb 17 Javascript
vue实现购物车列表
Jun 30 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 Javascript
用JS创建一个录屏功能
Nov 11 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简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
python获取本机mac地址和ip地址的方法
2015/04/29 Python
Python函数式编程指南(二):从函数开始
2015/06/24 Python
Python获取linux主机ip的简单实现方法
2016/04/18 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
opencv python如何实现图像二值化
2020/02/03 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
Python进行统计建模
2020/08/10 Python
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
霸王洗发水广告词
2014/03/14 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python