`

<JavaScript类的继承>

 
阅读更多

1.利用共享prototype实现继承
在JavaScript中没有专门的机制来实现类的继承,但可以通过拷贝一个类的prototype到另外一个类来实现继承。一种简单的实现如下:
fucntion class1(){
      //构造函数
}

function class2(){
      //构造函数
}
class2.prototype=class1.prototype;
class2.prototype.moreProperty1="xxx";
class2.prototype.moreMethod1=function(){
      //方法实现代码
}
var obj=new class2();
这样,首先是class2具有了和class1一样的prototype,不考虑构造函数,两个类是等价的。随后,又通过prototype给class2赋予了两个额外的方法。所以class2是在class1的基础上增加了属性和方法,这就实现了类的继承。
JavaScript提供了instanceof操作符来判断一个对象是否是某个类的实例,对于上面创建的obj对象,下面两条语句都是成立的:
obj instanceof class1
obj instanceof class2
表面上看,上面的实现完全可行,JavaScript也能够正确的理解这种继承关系,obj同时是class1和class2的实例。事是上不对,JavaScript的这种理解实际上是基于一种很简单的策略。看下面的代码,先使用prototype让class2继承于class1,再在class2中重复定义method方法:
<script language="JavaScript" type="text/javascript">
<!--
//定义class1
function class1(){
      //构造函数
}
//定义class1的成员
class1.prototype={
      m1:function(){
            alert(1);
      }
}
//定义class2
function class2(){
      //构造函数
}
//让class2继承于class1
class2.prototype=class1.prototype;
//给class2重复定义方法method
class2.prototype.method=function(){
      alert(2);
}
//创建两个类的实例
var obj1=new class1();
var obj2=new class2();
//分别调用两个对象的method方法
obj1.method();
obj2.method();
//-->
</script>
从代码执行结果看,弹出了两次对话框“2”。由此可见,当对class2进行prototype的改变时,class1的prototype也随之改变,即使对class2的prototype增减一些成员,class1的成员也随之改变。所以class1和class2仅仅是构造函数不同的两个类,它们保持着相同的成员定义。从这里,相信读者已经发现了其中的奥妙:class1和class2的prototype是完全相同的,是对同一个对象的引用。其实从这条赋值语句就可以看出来:
//让class2继承于class1
class2.prototype=class1.prototype;
在JavaScript中,除了基本的数据类型(数字、字符串、布尔等),所有的赋值以及函数参数都是引用传递,而不是值传递。所以上面的语句仅仅是让class2的prototype对象引用class1的prototype,造成了类成员定义始终保持一致的效果。从这里也看到了instanceof操作符的执行机制,它就是判断一个对象是否是一个prototype的实例,因为这里的obj1和obj2都是对应于同一个prototype,所以它们instanceof的结果都是相同的。
因此,使用prototype引用拷贝实现继承不是一种正确的办法。但在要求不严格的情况下,却也是一种合理的方法,惟一的约束是不允许类成员的覆盖定义。下面一节,将利用反射机制和prototype来实现正确的类继承。

 2.利用反射机制和prototype实现继承

 function class1(){
      //构造函数
}
class1.prototype={
      method:function(){
           alert(1);
      },
      method2:function(){
           alert("method2");
      }
}
function class2(){
      //构造函数
}
//让class2继承于class1
for(var p in class1.prototype){
       class2.prototype[p]=class1.prototype[p];
}

//覆盖定义class1中的method方法
class2.prototype.method=function(){
      alert(2);
}
//创建两个类的实例
var obj1=new class1();
var obj2=new class2();
//分别调用obj1和obj2的method方法
obj1.method();
obj2.method();
//分别调用obj1和obj2的method2方法
obj1.method2();
obj2.method2();

 

 从运行结果可见,obj2中重复定义的method已经覆盖了继承的method方法,同时method2方法未受影响。而且obj1中的method方法仍然保持了原有的定义。这样,就实现了正确意义的类的继承。为了方便开发,可以为每个类添加一个共有的方法,用以实现类的继承:
//为类添加静态方法inherit表示继承于某类
Function.prototype.inherit=function(baseClass){
     for(var p in baseClass.prototype){
            this.prototype[p]=baseClass.prototype[p];
     }
}
这里使用所有函数对象(类)的共同类Function来添加继承方法,这样所有的类都会有一个inherit方法,用以实现继承,读者可以仔细理解这种用法。于是,上面代码中的:
//让class2继承于class1
for(var p in class1.prototype){
       class2.prototype[p]=class1.prototype[p];
}
可以改写为:
//让class2继承于class1
class2.inherit(class1)
这样代码逻辑变的更加清楚,也更容易理解。通过这种方法实现的继承,有一个缺点,就是在class2中添加类成员定义时,不能给prototype直接赋值,而只能对其属性进行赋值,例如不能写为:
class2.prototype={
      //成员定义
}
而只能写为:
class2.prototype.propertyName=someValue;
class2.prototype.methodName=function(){
      //语句
}

 

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    liferay集成struts2

    &lt;footer-portlet-javascript&gt;/js/main.js&lt;/footer-portlet-javascript&gt; &lt;css-class-wrapper&gt;woshikangfei-portlet&lt;/css-class-wrapper&gt; &lt;/portlet&gt; ``` ##### 3. 修改`liferay-display.xml` - **liferay-display...

    JavaScript 参考教程

    slice() 用法:&lt;字符串对象&gt;.slice(&lt;始&gt;, &lt;终&gt;);与substring()类似,返回原字符串的子字符串,但参数&lt;终&gt;包含在结果中。trimLeft() 用法:&lt;字符串对象&gt;.trimLeft();返回去掉原字符串左侧空白字符的新字符串。...

    Auntion-TableSort国人写的一个javascript表格排序的东西.docx

    - **封装、继承、多态**:该插件支持面向对象编程的概念,例如使用`prototype`实现类的继承。 #### 三、使用方法 ##### 1. 基础使用 - **初始化**:创建一个`tableSort`对象,并指定表格的ID以及表头列的class名称...

    EXT 中文帮助手册

    将数据加入到模板中 62&lt;br&gt;下一步 63&lt;br&gt;学习利用模板(Templates)的格式化功能 63&lt;br&gt;正式开始 63&lt;br&gt;下一步 64&lt;br&gt;事件处理 64&lt;br&gt;非常基础的例子 64&lt;br&gt;处理函数的作用域 64&lt;br&gt;传递参数 65&lt;br&gt;类设计 66&lt;br&gt;...

    dwr学习入门资料

    &lt;script type='text/javascript' src='&lt;%=basePath%&gt;map521/interface/mapdata.js'&gt;&lt;/script&gt; &lt;script type='text/javascript' src='&lt;%=basePath%&gt;map521/engine.js'&gt;&lt;/script&gt; &lt;script type="text/javascript" src=...

    AJAX 源码范例

    06/6.6.1.html 利用共享prototype实现继承范例&lt;br&gt; 06/6.6.2.html 利用反射机制和prototype实现继承范例&lt;br&gt; 06/6.6.3.html prototype-1.3.1框架中的类继承实现机制范例&lt;br&gt; 06/6.7.2.html 在JavaScript实现...

    一个简单的servlet示例

    &lt;servlet-name&gt;MyServlet&lt;/servlet-name&gt; &lt;servlet-class&gt;com.example.MyServlet&lt;/servlet-class&gt; &lt;/servlet&gt; &lt;servlet-mapping&gt; &lt;servlet-name&gt;MyServlet&lt;/servlet-name&gt; &lt;url-pattern&gt;/MyServlet&lt;/url-...

    JavaScript中浅讲ajax图文详解

    &lt;servlet-name&gt;myServlet&lt;/servlet-name&gt; &lt;servlet-class&gt;com.example.MyServlet&lt;/servlet-class&gt; &lt;/servlet&gt; &lt;servlet-mapping&gt; &lt;servlet-name&gt;myServlet&lt;/servlet-name&gt; &lt;url-pattern&gt;/myservlet&lt;/url-...

    JavaScript中的类继承

    JavaScript中的类继承是一种模拟传统面向对象编程中类概念的方式,因为JavaScript本身是一种基于原型的面向对象语言。在JavaScript中,对象可以直接从其他对象继承属性和方法,而不是通过类的实例化。这种继承机制...

    JavaScript继承

    此外,JavaScript的灵活性允许开发者选择基于类的继承方式,或者利用原型继承的微妙之处,实现更高效的设计。 4.1 为什么需要继承 继承的主要目的是代码复用和降低耦合度。通过继承,可以在已有类的基础上扩展功能...

    javascript 原生态js类继承实现的方式

    我们还知道,面向对象编程有三个重要的概念 - 封装、继承和多态。 但是在JavaScript的世界中,所有的这一切特性似乎都不存在。 因为JavaScript本身不是面向对象的语言,而是基于对象的语言。

    用JavaScript给网页加口令.pdf

    JavaScript是一种解释性的编程语言,主要用于Web前端开发,它继承了Java的一些特性,但与HTML更加紧密地结合。JavaScript代码可以直接写在HTML文件中,作为HTML文档的一部分,浏览器或浏览器插件负责解释执行这些...

    Laravel开发-laravel-blade-javascript

    &lt;title&gt;示例&lt;/title&gt; &lt;script&gt; @section('scripts') var data = {}; @endsection &lt;/script&gt; &lt;/head&gt; &lt;body&gt; @yield('content') &lt;/body&gt; &lt;/html&gt; &lt;!-- child.blade.php --&gt; @extends('parent') @section('...

    JavaScript实现继承的几种方式

    继承是面向对象的核心特性之一,它允许一个对象(子类)从另一个对象(父类)获取属性和方法,从而形成类之间的层次结构。本篇文章将深入探讨JavaScript中实现继承的几种常见方式。 1. 原型链继承 JavaScript的原型...

    JavaScript学习之三 — JavaScript实现继承的7种方式

    本篇文章将深入探讨JavaScript实现继承的七种常见方式,帮助你更好地理解和运用这一概念。 1. 原型链继承(Prototype Chain Inheritance) 原型链是JavaScript实现继承的基础。每个函数都有一个`prototype`属性,这...

    struts1 uploadify 多文件上传

    &lt;script type="text/javascript"&gt; $(document).ready(function() { $('#fileInput').uploadify({ 'uploader': '/path/to/uploadify.swf', 'script': '/uploadAction', 'cancelImg': '/path/to/cancel.png', '...

    Freemarker简介及标签详解大全

    8. 模板继承:`&lt;#extends&gt;`和`&lt;#block&gt;`,实现模板的继承结构,便于维护和布局。 9. 自定义标签:通过自定义指令,可以扩展Freemarker的功能,实现特定需求。 标签的详解涵盖了Freemarker的所有内置标签和自定义...

    tomcat 7.0 + websocket demo

    首先,创建一个 WebSocket 类,该类继承自 javax.websocket.Session 并实现 OnOpen、OnClose、OnMessage 和 OnError 方法。 ```java import javax.websocket.OnClose; import javax.websocket.OnMessage; import ...

Global site tag (gtag.js) - Google Analytics