JavaScript实现多重继承的方法分析


Posted in Javascript onJanuary 09, 2018

本文实例讲述了JavaScript实现多重继承的方法。分享给大家供大家参考,具体如下:

1. 定义一个空的父类构造函数,然后通过prototype的方式为该父类定义属性和方法

2. 定义一个空的子类的构造函数,然后将子类的原型绑定在父类的实例上,再将子类原型的父类也绑定在父类的实例上。通过prototype的方式为子类设置自己的属性和方法。

3. 定义一个空的孙类构造函数,然后将孙类的原型绑定到子类的实例上,再将孙类原型的父类绑定到子类的实例上。通过prototype方式为孙类定义自己的属性和方法。

4. 实例化一个孙类对象,通过调用该实例对象,调用自身的方法,也可以调用孙类的父类即文中的子类的方法,也可直接调用最大父类即这里父类的方法,也可以为当前对象添加属性和方法。

function Person(){}
Person.prototype.name = "人";// 为人类创建一个name属性
Person.prototype.say = function(content){// 为人类创建一个说话的方法
  if(!this.name){ // 如果对象不存在name属性,则使用原型链的name
    this.name = this.__proto__.name;
  }
  console.log("我是" + this.name + ",我想说"+content);
};
function Parent(){}
Parent.prototype = new Person();  // 设置Parent类继承Person类
Parent.prototype.superClass = new Person();// 设置superClass保存父类Person的方法属性
Parent.prototype.name = "父辈类";// 设置Parent类的name属性
Parent.prototype.say = function(){// 设置Parent类自己的 say 方法
  console.log("我是Parent类的say方法!");
};
function Child(){}
Child.prototype = new Parent();// 设置Child类继承Parent类
Child.prototype.superClass = new Parent();// 设置superClass保存父类Parent的方法属性
Child.prototype.say = function(){  //设置Child类自己的say方法
  console.log("我是Child类的say方法!");
}
var c = new Child();// 实例化一个Child对象
c.say();  // 调用自身原型的say方法,输出:我是Child类的say方法!
c.superClass.say(); // 调用父类Parent的say方法,输出: 我是Parent类的say方法!
c.superClass.superClass.say("哈哈");// 直接调用最大的父类Person的say方法(方法中的this指向Person),输出:我是人,我想说哈哈"
// 用call调用最大的父类Person的say方法(方法中的this指向实例化对象c,但此时c并没有name属性,所以this.name用的是Parent的name)
c.superClass.superClass.say.call(c,"嘻嘻"); // 输出:我是父辈类,我想说嘻嘻
c.name = "子类实例";// 给当前对象增加name属性
// 还是用call调用最大父类Person的say方法(此时c对象中已经有name属性);
c.superClass.superClass.say.call(c,"我是子类的实例化对象"); // 输出:我是子类实例,我想说我是子类的实例化对象

ps:多重继承可以在原型对象上新增一个属性用以保存父类的对象和属性,子类调用的时候使用superClass点出父类方法,这样一来就解决了父类和子类方法同名,子类继承父类之后会覆盖父类方法的问题。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript编程起步(第四课)
Jan 10 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
javascript操作符"!~"详解
Feb 10 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
Nov 02 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
vue动态路由配置及路由传参的方式
May 23 Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 Javascript
webpack多入口文件页面打包配置详解
Jan 09 #Javascript
Vue项目组件化工程开发实践方案
Jan 09 #Javascript
详解webpack之scss和postcss-loader的配置
Jan 09 #Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 #Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 #Javascript
详解webpack babel的配置
Jan 09 #Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 #Javascript
You might like
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
jQuery最佳实践完整篇
2011/08/20 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
web打印小结
2017/01/11 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
python实现在windows下操作word的方法
2015/04/28 Python
Python数组定义方法
2016/04/13 Python
Python生成密码库功能示例
2017/05/23 Python
Python实现求数列和的方法示例
2018/01/12 Python
Python中的Cookie模块如何使用
2020/06/04 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
pytorch简介
2020/11/11 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
匡威英国官网:Converse英国
2018/12/02 全球购物
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
.net开发工程师面试题
2014/02/25 面试题
宣传口号大全
2014/06/16 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
公司新员工欢迎词
2015/09/30 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
MyBatis 动态SQL全面详解
2021/10/05 MySQL