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的图片大小自动适应实现代码
Nov 17 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
JavaScript中两个字符串的匹配
Jun 08 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
AngularJS自定义控件实例详解
Dec 13 Javascript
WebPack基础知识详解
Jan 16 Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 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获取文件名后缀
2013/06/09 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
range 标准化之获取
2011/08/28 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
python3抓取中文网页的方法
2015/07/28 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
将python安装信息加入注册表的示例
2019/11/20 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
生日礼品店创业计划书范文
2014/03/21 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
工程承包协议书
2014/10/20 职场文书
礼貌问候语大全
2015/11/10 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
JavaScript实现简单拖拽效果
2021/09/15 Javascript
JavaScript前端面试组合函数
2022/06/21 Javascript