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 tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
DOM 中的事件处理介绍
Jan 18 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
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中的观察者模式
2010/03/24 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
jquery click([data],fn)使用方法实例介绍
2013/07/08 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
Python3导入自定义模块的三种方法详解
2018/04/13 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
Django实现将一个字典传到前端显示出来
2020/04/03 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
德国户外商店:eXXpozed
2020/07/25 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
财务管理个人自荐书范文
2013/11/24 职场文书
美容师的职业规划书
2013/12/27 职场文书
中学自我评价
2014/01/31 职场文书
事业单位鉴定材料
2014/05/25 职场文书
学术诚信承诺书
2014/05/26 职场文书
新书发布会策划方案
2014/06/09 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
配置Kubernetes外网访问集群
2022/03/31 Servers
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python