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 相关文章推荐
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
Oct 16 Javascript
js获取select选中的option的text示例代码
Dec 19 Javascript
JQuery性能优化的几点建议
May 14 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
jQuery鼠标事件汇总
Aug 30 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 Javascript
javascript+Canvas实现画板功能
Jun 23 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(三)
2012/03/22 PHP
javascript 异常处理使用总结
2009/06/21 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
Bootstrap基本样式学习笔记之标签(5)
2016/12/07 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
2017/03/17 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
vue的webcamjs集成方式
2020/11/16 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
python+tkinter实现学生管理系统
2019/08/20 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
python多线程使用方法实例详解
2019/12/30 Python
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
一套Delphi的笔试题二
2013/05/11 面试题
售后主管岗位职责
2013/12/08 职场文书
六查六看剖析材料
2014/02/15 职场文书
银行贷款承诺书
2014/03/29 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
个人收入证明模板
2014/09/18 职场文书
班级管理经验交流材料
2015/11/02 职场文书
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android