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 相关文章推荐
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
javascript中xml操作实现代码
Nov 21 Javascript
二叉树先序遍历的非递归算法具体实现
Jan 09 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
Apr 04 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
AngularJS转换响应内容
Jan 27 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
JS+CSS实现3D切割轮播图
Mar 21 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
加速XP搜索功能堪比vista
2007/03/22 PHP
PHP中动态显示签名和ip原理
2007/03/28 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
jQuery学习笔记之jQuery原型属性和方法
2014/06/09 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
vue 中swiper的使用教程
2018/05/22 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
Fiddler如何抓取手机APP数据包
2016/01/22 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
用python计算文件的MD5值
2020/12/23 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
康拓普公司Java笔面试
2016/09/23 面试题
幼儿园毕业寄语
2014/04/03 职场文书
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS