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扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
Dec 25 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
Jan 08 Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 Javascript
Vue自定义全局弹窗组件操作
Aug 11 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 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
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
动态刷新 dorado树的js代码
2009/06/12 Javascript
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
python实现学生管理系统
2018/01/11 Python
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
Java面试题汇总
2015/12/06 面试题
高中的职业生涯规划书
2013/12/28 职场文书
思想品德课教学反思
2014/02/10 职场文书
决心书标准格式
2014/03/11 职场文书
员工薪酬激励方案
2014/06/13 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
感谢信格式范文
2015/01/22 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
药店收银员岗位职责
2015/04/07 职场文书
立项申请报告范本
2015/05/15 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
vue递归实现树形组件
2022/07/15 Vue.js