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实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
实用javaScript技术-屏蔽类
Aug 15 Javascript
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 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中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
javascript document.execCommand() 常用解析
2009/12/14 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
JavaScript this关键字的深入详解
2021/01/14 Javascript
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
css sprite简单实例
2016/05/23 HTML / CSS
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
高校自主招生校长推荐信
2015/03/23 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书