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 相关文章推荐
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
jquery 滚动条事件简单实例
Jul 12 Javascript
js 控制图片大小核心讲解
Oct 09 Javascript
js实现动态改变字体大小代码
Jan 02 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
jquery中radio checked问题
Mar 16 Javascript
JS中Location使用详解
May 12 Javascript
Jquery注册事件实现方法
May 18 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
简易Vue评论框架的实现(父组件的实现)
Jan 08 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
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设计模式之委托模式
2016/02/13 PHP
PHP简单获取网站百度搜索和搜狗搜索收录量的方法
2016/08/23 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
一些不错的js函数ajax
2008/08/20 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
详解基于django实现的webssh简单例子
2018/07/17 Python
Python装饰器用法与知识点小结
2020/03/09 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
一套中级Java程序员笔试题
2015/01/14 面试题
建筑项目策划书
2014/01/13 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
小区推广策划方案
2014/06/06 职场文书
天猫活动策划方案
2014/08/21 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python
利用Python实时获取steam特惠游戏数据
2022/06/25 Python
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS