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 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
把JS与CSS写在同一个文件里的书写方法
Jun 02 Javascript
深入理解JavaScript作用域和作用域链
Oct 21 Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
Active控件问题小结(附解决办法)
Jun 09 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
js实现整体缩放页面适配移动端
Mar 31 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
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
PHP 采集程序原理分析篇
2010/03/05 PHP
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
jQuery Ajax 实例全解析
2011/04/20 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
python基础教程之lambda表达式使用方法
2014/02/12 Python
Python搭建FTP服务器的方法示例
2018/01/19 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
外贸英语毕业生自荐信
2013/11/14 职场文书
教师节促销活动方案
2014/02/14 职场文书
师德演讲稿范文
2014/05/06 职场文书
css背景和边框标签实例详解
2021/05/21 HTML / CSS
实例讲解Python中sys.argv[]的用法
2021/06/03 Python