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 相关文章推荐
JavaScript中的细节分析
Jun 30 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
bing Map 在vue项目中的使用详解
Apr 09 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
Vue项目环境搭建详细总结
Sep 26 Javascript
js面向对象方式实现拖拽效果
Mar 03 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 解决session死锁的方法
2013/06/20 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
Angular(5.2-&gt;6.1)升级小结
2018/12/27 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
深入学习Python中的上下文管理器与else块
2017/08/27 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
python在文本开头插入一行的实例
2018/05/02 Python
python3 flask实现文件上传功能
2020/03/20 Python
python入门:这篇文章带你直接学会python
2018/09/14 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
python输入错误后删除的方法
2019/10/12 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
财务会计专业毕业生自荐信
2013/10/02 职场文书
行政主管岗位职责
2015/02/03 职场文书
贪污检举信范文
2015/03/02 职场文书
2015年行政部工作总结
2015/04/28 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
Python pygame实现中国象棋单机版源码
2021/06/20 Python