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弹出层代码
Sep 24 Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
js 函数性能比较方法
Aug 24 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 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
虫族 ZERG 概述
2020/03/14 星际争霸
用PHP获取Google AJAX Search API 数据的代码
2010/03/12 PHP
php 获取百度的热词数据的代码
2012/02/18 PHP
小谈php正则提取图片地址
2014/03/27 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
基于PHP实现短信验证码发送次数限制
2020/07/11 PHP
JavaScript中的Location地址对象
2008/01/16 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
解决Python传递中文参数的问题
2015/08/04 Python
python数字图像处理之高级滤波代码详解
2017/11/23 Python
Python numpy 常用函数总结
2017/12/07 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
python读写csv文件的方法
2019/08/13 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
店长职务说明书
2014/02/04 职场文书
新品发布会策划方案
2014/06/08 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
党支部鉴定意见
2015/06/02 职场文书
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python