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 相关文章推荐
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 Javascript
vue中是怎样监听数组变化的
Oct 24 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 Javascript
JavaScript实现页面动态验证码的实现示例
Mar 23 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
php导入模块文件分享
2015/03/17 PHP
PHP检查URL包含特定字符串实例方法
2019/02/11 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
js数组操作学习总结
2013/11/04 Javascript
iframe子父页面调用js函数示例
2013/11/07 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
使用python实现tcp自动重连
2017/07/02 Python
使用python实现接口的方法
2017/07/07 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
四查四看整改措施
2014/09/19 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
毕业实习自我鉴定范文2014
2014/09/26 职场文书
走近毛泽东观后感
2015/06/04 职场文书
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android
Golang 切片(Slice)实现增删改查
2022/04/22 Golang
Python实现双向链表
2022/05/25 Python