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 20 Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
Mar 03 Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
Bootstrap多级菜单的实现代码
May 23 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
解决vue-cli 打包后自定义动画未执行的问题
Nov 12 Javascript
javascript 代码是如何被压缩的示例代码
May 06 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
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
为你总结一些php系统类函数
2015/10/21 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
CI框架附属类用法分析
2018/12/26 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
javascript奇异的arguments分析
2010/10/20 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
Bootstrap学习笔记之环境配置(1)
2016/12/07 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
Python迭代和迭代器详解
2016/11/10 Python
Python实现Pig Latin小游戏实例代码
2018/02/02 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
Django中URL的参数传递的实现
2019/08/04 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
大学生毕业求职简历的自我评价
2013/10/24 职场文书
50岁生日感言
2014/01/23 职场文书
迟到检讨书大全
2014/01/25 职场文书
马丁路德金演讲稿
2014/05/19 职场文书
公司承诺书格式
2014/05/21 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
行政上诉状范文
2015/05/23 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书
html粘性页脚的具体使用
2022/01/18 HTML / CSS
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis