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 学习笔记(一)
Oct 13 Javascript
JSONP 跨域共享信息
Aug 16 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
Aug 02 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 Javascript
javascript中的闭包概念与用法实践分析
Jul 26 Javascript
javascript实现简单搜索功能
Mar 26 Javascript
手把手教你实现 Promise的使用方法
Sep 02 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 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
短波问题解答
2021/02/28 无线电
PHP学习之PHP表达式
2006/10/09 PHP
PHP 编程的 5个良好习惯
2009/02/20 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
Javascript this关键字使用分析
2008/10/21 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
JQuery实现样式设置、追加、移除与切换的方法
2015/06/11 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
python实现的jpg格式图片修复代码
2015/04/21 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
Python给图像添加噪声具体操作
2019/03/03 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
Python语法分析之字符串格式化
2019/06/13 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
幼儿园安全责任书范本
2014/07/24 职场文书
生物工程专业求职信
2014/09/03 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
2014年科室工作总结
2014/11/20 职场文书
关于JavaScript回调函数的深入理解
2021/06/27 Javascript