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的函数
Jan 31 Javascript
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
jquery isType() 类型判断代码
Feb 14 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
Jun 20 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
JavaScript各类型的关系图解
Oct 16 Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
JS验证全角与半角及相互转化的介绍
May 18 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 Javascript
Vue 组件的挂载与父子组件的传值实例
Sep 02 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+MYSQL的文章管理系统(二)
2006/10/09 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
python使用scrapy解析js示例
2014/01/23 Python
python映射列表实例分析
2015/01/26 Python
利用Python实现Windows定时关机功能
2017/03/21 Python
Python探索之SocketServer详解
2017/10/28 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
微信公众号token验证失败解决方案
2019/07/22 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
大学生求职自荐信
2013/12/12 职场文书
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
会计专业自我评价
2014/02/12 职场文书
青年文明号口号
2014/06/17 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
Python 中面向接口编程
2022/05/20 Python
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python