JavaScript继承与多继承实例分析


Posted in Javascript onMay 26, 2018

本文实例讲述了JavaScript继承与多继承。分享给大家供大家参考,具体如下:

虽然最新的EC6里边已经有了class的相关功能,但是从普及度上和阅读旧代码需求的方面来看,这点知识也得了解一下。

本文结构:

① 原理及分析

② 简单封装后的运用

1. 继承

① 原理及分析

先上一张图:

JavaScript继承与多继承实例分析

用这段代码的思想来实现继承,即:

var inherit=function(objBase){
    var F=function(){}; //第一步:定义一个函数F
    F.prototype=objBase; //第二步:将传进来的基类对象(objBase)赋给函数F的原型(F.prototype)
    return new F(); //第三步:返回一个F对象(已经具备了objBase特征)
}

② 简单封装后的运用

Function.prototype.inherit=function(objBase){
    this.prototype=new objBase();
}
var Person=function(){
    this.name="倩倩";
    this.sex="女";
}
var Student=function(){
    this.id="0712";
}
Student.inherit(Person);
var student=new Student();
alert(student.name +","+ student.sex +","+ student.id);

2. 多继承

① 原理及分析

多继承就是将多个对象的成员,交给当前对象

var o1={name:"倩倩"} //对象的字面值
var o2={sex:"女"}
var She=function(){}
She.prototype={};  //先声明
for(var k in o1){
    She.prototype[k]=o1[k];
}
for(var k in o2){
    She.prototype[k]=o2[k];
}
var she=new She();
alert(she.name + "," + she.sex);

② 简单封装后的运用

Function.prototype.inherits=function(){
    var arr=arguments; //将接收到的arguments对象传给数组arr
    this.prototype={};
    for(var i=0;i<arr.length;i++){
      for(var k in arr[i]){
        var obj=arr[i];
        this.prototype[k]=obj[k];
      }
    }
}
var o1={name:"倩倩"} //对象的字面值
var o2={sex:"女"}
var She=function(){}
She.inherits(o1,o2);
var she=new She();
alert(she.name + "," + she.sex);

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js中哈希表的几种用法总结
Jan 28 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
JavaScript获取一个范围内日期的方法
Apr 24 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
js读取本地文件的实例
Dec 22 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 #jQuery
Vue仿支付宝支付功能
May 25 #Javascript
微信小程序实现人脸检测功能
May 25 #Javascript
微信小程序实现人脸识别
May 25 #Javascript
微信小程序实现刷脸登录
May 25 #Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 #Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 #Javascript
You might like
php 禁止页面缓存输出
2009/01/07 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
[原创]图片分页查看
2006/08/28 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
前端vue+elementUI如何实现记住密码功能
2020/09/20 Javascript
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
Python入门篇之函数
2014/10/20 Python
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
Python网络爬虫实例讲解
2016/04/28 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
python调用接口的4种方式代码实例
2019/11/19 Python
结束运行python的方法
2020/06/16 Python
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
华三通信H3C面试题
2015/05/15 面试题
编辑硕士自荐信范文
2013/11/27 职场文书
会计电算化学生个人的自我评价
2014/02/08 职场文书
中国好声音广告词
2014/03/18 职场文书
留学顾问岗位职责
2014/04/14 职场文书
职位说明书范文
2014/05/07 职场文书
教师三严三实学习心得体会
2014/10/11 职场文书
人事文员岗位职责
2015/02/04 职场文书
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python