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 相关文章推荐
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
js前台分页显示后端JAVA数据响应
Mar 18 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
JavaScript获取DOM元素的11种方法总结
Apr 25 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
关于微信小程序bug记录与解决方法
Aug 15 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 Javascript
vue 调用 RESTful风格接口操作
Aug 11 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做推送服务端实现ios消息推送
2013/07/01 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
php+ajax实现文章自动保存的方法
2014/12/30 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
php操作access数据库的方法详解
2017/02/22 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
原生js中ajax访问的实例详解
2017/09/19 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
Python中的字符串类型基本知识学习教程
2016/02/04 Python
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
python join方法使用详解
2019/07/30 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
Python自动创建Excel并获取内容
2020/09/16 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
大学生自荐信
2013/12/11 职场文书
土建资料员岗位职责
2014/01/04 职场文书
大学秋游活动方案
2014/02/11 职场文书
保护环境倡议书范文
2014/05/13 职场文书
酒店节能减排方案
2014/05/26 职场文书
超市理货员岗位职责
2014/07/04 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
中秋节慰问信
2015/02/15 职场文书
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python