脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 继承方式

js的三种继承方式详解

 更新时间：2017年01月21日 08:22:19   作者：hahaxiaotianxia  
本文主要介绍了js的三种继承方式。具有一定的参考价值，下面跟着小编一起来看下吧

1.js原型（prototype）实现继承

代码如下

<body> 
<script type="text/javascript"> 
 function Parent(name,age){
   this.name=name;
   this.age=age;
   this.sayHi=function(){
    alert("Hi, my name is "+this.name+", my age is "+this.age);
   }
  }
//Child继承Parent
  function Child(grade){
   this.grade=grade;
   this.sayGrade=function(){
    alert("My grade is "+this.grade);
   }
  }
  Child.prototype=new Parent("小明","10");/////////// 
  var chi=new Child("5");
  chi.sayHi();
  chi.sayGrade();
</script> 
</body>

2.构造函数实现继承 

代码如下:

<body> 
<script type="text/javascript"> 
 function Parent(name,age){
   this.name=name;
   this.age=age;
   this.sayHi=function(){
    alert("Hi, my name is "+this.name+", my age is "+this.age);
   }
  }
//Child继承Parent 
  function Child(name,age,grade){
   this.grade=grade;
   this.sayHi=Parent;///////////
   this.sayHi(name,age);
   this.sayGrade=function(){
    alert("My grade is "+this.grade);
   }
  }
  var chi=new Child("小明","10","5");
  chi.sayHi();
  chi.sayGrade();
</script> 
</body>

3.call , apply实现继承         -----很方便！

代码如下:

<body> 
<script type="text/javascript"> 
 function Parent(name,age){
   this.name=name;
   this.age=age;
   this.sayHi=function(){
    alert("Hi, my name is "+this.name+", my age is "+this.age);
   }
  }
  function Child(name,age,grade){
   this.grade=grade;
   // Parent.call(this,name,age);/////////// 
   // Parent.apply(this,[name,age]);/////////// 都可
   Parent.apply(this,arguments);/////////// 
   this.sayGrade=function(){
    alert("My grade is "+this.grade);
   }
  // this.sayHi=function(){
   //  alert("Hi, my name is "+this.name+", my age is "+this.age+",My grade is "+this.grade);
   // }
  }
  var chi=new Child("小明","10","5");
  chi.sayHi();
  chi.sayGrade();
</script> 
</body>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JS使用JSON作为参数实例分析

    JS使用JSON作为参数实例分析

    这篇文章主要介绍了JS使用JSON作为参数,结合实例形式分析了ajax传递json数据及数据处理的相关技巧,需要的朋友可以参考下
    2016-06-06
  • event.X和event.clientX的区别分析

    event.X和event.clientX的区别分析

    解释一下event.X和event.clientX有什么区别？event.clientX返回事件发生时,mouse相对于客户窗口的X坐标 event.X也一样但是如果设置事件对象的定位属性值为relative
    2011-10-10
  • Javascript玩转继承(一)

    Javascript玩转继承(一)

    最近一直在学Javascript，打算写一些文章，算做自己的学习心得吧，也可以算是学习笔记。没有系统的知识点，太基础的不想写，主要是写一些自己觉得有价值的地方
    2014-05-05
  • javascript 公用拖拽类代码

    javascript 公用拖拽类代码

    兼容Event对象等 拖拽类代码
    2008-12-12
  • JS实现不用中间变量temp 实现两个变量值得交换方法

    JS实现不用中间变量temp 实现两个变量值得交换方法

    这篇文章主要介绍了在JS中 实现不用中间变量temp 实现两个变量值得交换 ,需要的朋友可以参考下
    2018-02-02
  • 微信小程序日历/日期选择插件使用方法详解

    微信小程序日历/日期选择插件使用方法详解

    这篇文章主要为大家详细介绍了微信小程序日历和日期选择插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 前端如何用post的方式进行eventSource请求

    前端如何用post的方式进行eventSource请求

    这篇文章主要给大家介绍了关于前端如何用post的方式进行eventSource请求的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-04-04
  • JS实现的打字机效果完整实例

    JS实现的打字机效果完整实例

    这篇文章主要介绍了JS实现的打字机效果,结合完整实例形式分析了javascript定时触发自定义函数模拟打字输出效果的相关实现技巧,需要的朋友可以参考下
    2016-06-06
  • 详解webpack性能优化——DLL

    详解webpack性能优化——DLL

    本篇文章主要介绍了详解webpack性能优化——DLL，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Postman无法正常返回结果问题解决

    Postman无法正常返回结果问题解决

    这篇文章主要介绍了Postman无法正常返回结果问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08

最新评论