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

 更新时间:2018年01月09日 14:20:01   作者:安静的嘶吼  
这篇文章主要介绍了JavaScript实现多重继承的方法,结合实例形式详细分析了javascript实现多重继承的具体步骤与相关操作技巧,需要的朋友可以参考下

本文实例讲述了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错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

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

相关文章

  • 使用微信小程序开发前端【快速入门】

    使用微信小程序开发前端【快速入门】

    本文从代码角度和宏观角度简单阐述了微信小程序在前端领域的一些内容和影响,希望能够帮助那些不了解微信小程序的开发者很快入门并认识这一新的技术领域。
    2016-12-12
  • JavaScript实现验证码案例

    JavaScript实现验证码案例

    这篇文章主要为大家详细介绍了JavaScript实现验证码案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • Javascript实现贪吃蛇小游戏(含详细注释)

    Javascript实现贪吃蛇小游戏(含详细注释)

    这篇文章主要为大家详细介绍了Javascript实现贪吃蛇小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • 浅析JavaScript函数的调用模式

    浅析JavaScript函数的调用模式

    这篇文章主要为大家详细介绍了JavaScript函数的调用模式,包括方法调用模式,构造器调用模式,apply/call调用模式,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 基于JavaScript的简易计算器功能

    基于JavaScript的简易计算器功能

    这篇文章主要为大家详细介绍了基于JavaScript的简易计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • 如何判断鼠标是否在DIV的区域内

    如何判断鼠标是否在DIV的区域内

    通过mouseover,mouseout来触发事件,才判断鼠标是否在该区域。 但是这种方法的局限性就是,必须要触发mouseover,或mouseout,mouseleave事件才能知道
    2013-11-11
  • 搭建Bootstrap离线文档的方法

    搭建Bootstrap离线文档的方法

    虽然现在不联网的情况很少,但在本机上搭建一份Bootstrap离线文档以备不时之需也是很有必要的。下面就给大家分享下搭建Bootstrap离线文档的方法,感兴趣的朋友一起看看吧
    2016-12-12
  • js获得地址栏?问号后参数的方法

    js获得地址栏?问号后参数的方法

    这篇文章介绍了js获得地址栏?问号后参数的方法,有需要的朋友可以参考一下
    2013-08-08
  • js获取隐藏元素宽高的实现方法

    js获取隐藏元素宽高的实现方法

    下面小编就为大家带来一篇js获取隐藏元素宽高的实现方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • js for循环,为什么一定要加var定义i变量

    js for循环,为什么一定要加var定义i变量

    我知道,有些人(譬如之前的我)写js的for循环时,都不习惯加上var,这当然是语法允许的。
    2010-06-06

最新评论