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延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 Javascript
JavaScript数组前面插入元素的方法
Apr 06 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
js实现经典贪吃蛇小游戏
Mar 19 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 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防止SQL注入详解及防范
2013/11/12 PHP
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
2019/01/18 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
python遍历目录的方法小结
2016/04/28 Python
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
python 利用zmail库发送邮件
2020/09/11 Python
flask框架中的cookie和session使用
2021/01/31 Python
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
一套SQL笔试题
2016/08/14 面试题
将相和教学反思
2014/02/04 职场文书
11月升旗仪式讲话稿
2014/02/15 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
先进学校事迹材料
2014/12/30 职场文书
工作感言一句话
2015/08/01 职场文书
七年级英语教学反思
2016/02/15 职场文书
PHP获取学生成绩的方法
2021/11/17 PHP
Python内置的数据类型及使用方法
2022/04/13 Python
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android