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

Javascript编程之继承实例汇总

 更新时间：2015年11月28日 11:11:18   作者：陈在真Sunny_chen  
这篇文章主要介绍了Javascript编程之继承实现方法,结合实例形式分析汇总了五种常见的继承技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了Javascript编程之继承。分享给大家供大家参考，具体如下：

这篇文字是在看完《Javascript 王者归来》后的整理总结，文章详细章节在 第21章 P537

继承一般要实现以下三层含义：

1）子类实例可以共享父类的方法；
2）子类可以覆盖父类的方法或者扩展新的方法；
3）子类和父类都是子类实例的类型。

一、构造继承法

子类中调用父类的构造函数来维护的，该继承法能实现多重继承，但只能继承父类的共有方法，无法继承静态方法，而且不能用instanceof来验证实例。

function a(){
  this.say=function(){
  alert("happy new year！");
  }
}
function b(){
  a.apply(this,arguments);
}
a.prototype.fuck=function(){
  alert("%^&%^&%&^%&");
}
var oB=new b();
alert(oB instanceof a);// false
oB.say();       // happy new year
oB.fuck();       // 读不到

二、原型继承法／经典继承法

该继承法是通过复制已经存在的原型对象来实现行为重用，让对象实例共享原型对象的属性。支持多重继承，继承原型静态方法，能用instanceof来验证实例。

function a(){
 this.say=function(){
 alert("happy new year！");
 }
}
function b(){}
a.prototype.fuck=function(){
  alert("%^&%^&%&^%&");
}
a.prototype.z=123;
b.prototype=new a();
var oB=new b();
alert(oB instanceof a); // true
alert(oB.z);      // 123
oB.say();        // happy new year
oB.fuck();       // %^&%^&%&^%&

三、实例继承法／寄生构造函数模式

构造法不能继承类型的静态方法，原型继承得不完善（某些核心对象的不可枚举方法不能继承），而实例继承法能对原生核心对象或者DOM对象进行继承，它通过在类型中构造对象并返回的办法来实现继承，因此instanceof验证会是false，不支持多重继承。

function a(){
 var oA=new Array();
 oA.say=function(){
   alert("hello A!");
 }
 return oA;
}
var obj=new a();
alert(obj instanceof a); // false
obj.say();

四、拷贝继承法

该方法通过拷贝基类对象的所有可枚举属性和方法来模拟继承，因此它可以模拟多继承，但不能枚举的就无法继承；它可以继承父类的静态方法；

function a(){
  this.num=123;
  this.say=function(){
  alert("happy new year！");
  }
}
function b(){
  this.extends=function(obj){
    for(each in obj){
      this[each]=obj[each];
    }
  }
}
var oB=new b();
oB.extends(new a());
alert(oB instanceof a); // false
alert(oB.num);     // 123
oB.say();        // happy new year

五、混合继承法

顾名思义就是把上面几种继承法综合起来，取长补短，让继承更完善。常见的有 构造+原型继承：伪经典继承

function a(){
  this.num=123;
  this.say=function(){
  alert("happy new year！");
  }
}
function b(){
  a.apply(this);
}
b.prototype=new a();
b.prototype.z=123;
var oB=new b();
alert(oB instanceof a); // true
alert(oB.num);     // 123
oB.say();        // happy new year

六、各种继承法的优缺点

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

您可能感兴趣的文章:

相关文章

  • 原生js实现可拖动的登录框效果

    原生js实现可拖动的登录框效果

    本文主要介绍了原生js实现可拖动的登录框效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • 微信小程序自定义导航的方法

    微信小程序自定义导航的方法

    这篇文章主要为大家详细介绍了微信小程序自定义导航的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • 一文带你理解JS中的原型和原型链

    一文带你理解JS中的原型和原型链

    在学习JavaScript中的继承机制时,我们常常会遇到原型和原型链这两个概念,在初学阶段,不理解这些概念很容易陷入迷茫,甚至会导致学习 JS 的路程变得曲折,本文将介绍JavaScript原型和原型链的概念、设计思想以及相关的使用方法,需要的朋友可以参考下
    2023-07-07
  • JavaScript简单实现网页回到顶部功能

    JavaScript简单实现网页回到顶部功能

    JavaScript简单实现网页回到顶部功能,大家可以参考一下
    2013-11-11
  • js之切换全屏和退出全屏实现代码实例

    js之切换全屏和退出全屏实现代码实例

    这篇文章主要介绍了js之切换全屏和退出全屏实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • Javascript模拟实现new原理解析

    Javascript模拟实现new原理解析

    这篇文章主要介绍了Javascript模拟实现new原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-03-03
  • js实现滚动条自动滚动到最底部示例代码

    js实现滚动条自动滚动到最底部示例代码

    这篇文章主要给大家介绍了关于js实现滚动条自动滚动到最底部的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友可以参考下
    2023-06-06
  • JS实现表单多文件上传样式美化支持选中文件后删除相关项

    JS实现表单多文件上传样式美化支持选中文件后删除相关项

    在项目开发中我们经常遇到文件上传的功能，根据需求有多文件上传和单文件上传，今天小编给大家实例讲解下表单多文件上传样式美化支持选中文件后删除相关项，非常不错，感兴趣的朋友一起看看吧
    2016-09-09
  • JavaScript定义类的几种方式总结

    JavaScript定义类的几种方式总结

    本篇文章主要是对JavaScript定义类的几种方式进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01
  • IE,firefox(火狐)浏览器无提示关闭窗口js实现代码小结

    IE,firefox(火狐)浏览器无提示关闭窗口js实现代码小结

    在不是js打开的页面上按window.close()，会有提示框，很烦，现在可以不用了，没有提示框直接关闭窗口。下面脚本之家编辑特为大家整理了一些。
    2009-09-09

最新评论