extJS 在面向对象方面的支持

来源：互联网发布：微雕大师软件编辑：程序博客网时间：2024/06/07 08:52

简述：

研究extJS可以OO的继承

知识点：

1. extJS的继承方式

1) Ext.extend( INHERITENCE_CLASS,BASE_CLASS , { func:function(){....} }

在第三个参数里，覆写（override)基类的函数

2)Ext.extend( Base , { func : function(){...} }

直接覆写（override)包括基类的构造函数，成员函数

代码：

1、1）Ext.extend(INHERITENCE_CLASS,BASE_CLASS,{func:function(){....}}

test2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>test2.html</title>    <link rel="stylesheet" type="text/css" href="../ext-3.3.1/resources/css/ext-all.css"></link><script type="text/javascript" src="../ext-3.3.1/adapter/ext/ext-base.js"></script><script type="text/javascript" src="../ext-3.3.1/ext-all.js"></script>      <script type="text/javascript">    /****************declare Person Class*************************/    var Person = function(personInfo){      this.name = personInfo.name;      this.age = personInfo.age;     };    Person.prototype.getInfo = function(){      return this.name + ", " + this.age;    }        /************************Worker Class**************************/    var Worker = function(workerInfo){      Person.prototype.constructor.call(this,workerInfo);      this.job = workerInfo.job;    }        /************************Ext extend function ******************/    Ext.extend(Worker,Person,{      //override getInfo of Person Class      getInfo:function(){      return this.name + ", " + this.age + ", " + this.job;      }      })            /************************Test**********************************/    var someone = {      name : "John",      age  : 21,      job  : "IT_Worker"    };        var worker = new Worker(someone);    document.write(worker.getInfo());    </script>  </head>    <body>  </body></html>

输出：

1、2）Ext.extend( Base , { func : function(){...} }

test3.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>test3.html</title>    <link rel="stylesheet" type="text/css" href="../ext-3.3.1/resources/css/ext-all.css"></link><script type="text/javascript" src="../ext-3.3.1/adapter/ext/ext-base.js"></script><script type="text/javascript" src="../ext-3.3.1/ext-all.js"></script>      <script type="text/javascript">    /****************declare Person Class*************************/    var Person = function(personInfo){      this.name = personInfo.name;      this.age = personInfo.age;     };    Person.prototype.getInfo = function(){      return this.name + ", " + this.age;    };        /************************Worker Class**************************/    var Worker = Ext.extend(Person,{      constructor:function(workerInfo){        Person.prototype.constructor.call(this,workerInfo);//override the constructor        this.job = workerInfo.job;           },      getInfo:function(){ //override getInfo of Person Class        return this.name + ", " + this.age + ", " + this.job;      }    });        /************************Test**********************************/    var someone = {      name : "John",      age  : 21,      job  : "IT_Worker"    };        var person = new Person(someone);    document.write("PersonInfo: " + person.getInfo() + "<br>");        var worker = new Worker(someone);    document.write("WorkerInfo: " + worker.getInfo());    </script>  </head>    <body>  </body></html>

输出：

综述：

个人觉得还是第二种好，把构造函数视为成员函数去override