Extjs中使用extend(js继承) 的代码

注：抄<深入浅出Extjs>书
传统的js实现继承操作为：
一：定义一个父类


代码如下:

var BaseClass = function(){
//.....
};
BaseClass.prototype.someMethod = function(){
//.....
};
BaseClass.prototype.overridenMethod = function(){
//....
}

为BaseClass定义两个函数someMethod 和overridenMethod ,,然后定义一个subClass子类，可以直接从BaseClass中继承所有的属性和函数，


代码如下:

var subClass = function(){
BaseClass.call(this);
};
subClass.prototype = new BaseClass();
subClass.prototype.newMethod = function(){
//...
};
subClass.prototype.overridenMethod = function(){
//...
}

在上面的代码中，subClass的构造函数首先调用BaseClass的构造函数初始化数据，然后通过subClass.prototype = new BaseClass();这条语句让subClass类获得BaseClass中的所有属性和函数。这样就实现了继承。在此之后我们就可以操作subClass的prototype，为子类添加新的函数或者覆写父类的同名函数。
在EXT中使用Ext.extend()函数实现继承功能的方法：


代码如下:

var subClass = function(){
subClass.superclass.costructor.call(this);
};
Ext.extend(subClass, BaseClass,{
newMethod: function(){
//...
},
overridenMethod : function(){
//....
}
});

在Ext.extend()函数通过 subClass.superclass.costructor.call(this);就可以直接调用父类的构造函数。这个函数的第一个参数总是this， 以确保父类的构造函数在子类的作用域里工作。
如果父类的构造函数需要传入参数，我们也就可以将所需要的参数直接传给它，如：
subClass.superclass.costructor.call(this， config);
这样我们就得到了一个继承了父类的所有属性和函数的子类。

赞 (0)

相关推荐

  • Extjs 继承Ext.data.Store不起作用原因分析及解决

    关于这个原因有很多种,我只说下我遇到的 我这样 写Store来复用的 复制代码 代码如下: DocStore = Ext.extend(Ext.data.Store,{ initComponent:function(){ this.proxy = new Ext.data.HttpProxy({url:this.url}); this.reader = new Ext.data.JsonReader( { totalProperty: 'results', root: 'rows', id:'d

  • Extjs学习笔记之八 继承和事件基础

    这里接口的意思是Observable实际上起了一个抽象类的作用,Extjs中有大量的组件都是继承自这个类的.这个类提供了一些基本的方法比如addEvents,addlistener,fireEvent等等. 本文暂时不介绍如何使用extjs的组件响应事件,而是介绍Extjs的事件的一些实现原理.整个Extjs框架都是以一种面向对象的方式开发的,所以理解Javascript中的继承也很重要.我前面的一篇文章 补点基础:Javascript中的类和闭包 也是为这篇做准备.另外,博客园内还有一个写的很

  • Extjs中使用extend(js继承) 的代码

    注:抄<深入浅出Extjs>书 传统的js实现继承操作为: 一:定义一个父类 复制代码 代码如下: var BaseClass = function(){ //..... }; BaseClass.prototype.someMethod = function(){ //..... }; BaseClass.prototype.overridenMethod = function(){ //.... } 为BaseClass定义两个函数someMethod 和overridenMethod ,

  • 在Vue项目中使用d3.js的实例代码

    之前写一个 Demo里面 有些东西要使用d3实现一些效果 但是在很多论坛找资源都找不到可以在Vue里面使用D3.js的方法,npm 上面的D3相对来说 可以说是很不人性化了 完全没有说 在webpack上怎么使用D3.js 最后折腾很久 看到某位外国大佬 看他的案例 成功的实现了在Vue项目里面实现D3的使用 首先安装 npm install d3 --save-dev 以防万一,然后看package.json 安装完成 在我们开始之前,让我们渲染一个Vue组件,它使用常规的D3 DOM操作呈现

  • jquery 插件开发 extjs中的extend用法小结

    在jquery中,extend其实在做插件时还是用的比较多的,今天同时小结jquery和ext js中 的extend用法,先来看jquery中的. 1) extend(dest,src1,src2,src3...); 复制代码 代码如下: var start = { id: 123, count: 41, desc: 'this is information', title: 'Base Object', tag: 'uncategorized', values: [1,1,2,3,5,8,1

  • JavaScript中使用构造函数实现继承的代码

    复制代码 代码如下: //首先创建父类 function Person(name, age, address) { this.name = name; this.age = age; this.address = address; } //创建子类 function Student(score) { this.score = score; //可以用call方法或者是apply方法调用函数的构造函数 //调用父类的构造函数,通过call方法调用Person类的构造函数.这样就会在student中

  • php中去除所有js,html,css代码

    复制代码 代码如下: <?php $search = array ("'<script[^>]*?>.*?</script>'si", // 去掉 javascript "'<style[^>]*?>.*?</style>'si", // 去掉 css "'<[/!]*?[^<>]*?>'si", // 去掉 HTML 标记 "'<!--[/

  • Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码

    TreePanel继承自Panel,在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能.其中Ext.tree.TreeNode代表一个树节点,比较常用的属性包括text.id.icon.checked等.异步树Ext.tree.AsyncTreeNode.树加载器Ext.tree.TreeLoader.下面介绍Extjs 中的 Treepanel 实现菜单级联选中效果. 在 treepanel 里添加以下代码即可实现级联选中效果 主要实现了以下效果: 1.点击父级批量设置所有子节点选中状

  • 基于js中的原型、继承的一些想法

    基于js中的原型、继承的一些想法

    最近看到一个别人写的js类库,突然对js中的原型及继承产生了一些想法,之前也看过其中的一些内容,但是总不是很清晰,这几天利用空闲时间,对这块理解了一下,感觉还是有不通之处,思路上没那么条理,仅作为分享, 一.instanceof 在JavaScript有instanceof运算符,是二元运算符,使用方法 instanceA instanceof A,返回值是布尔值(boolean),含义是判断instanceA是否是A的一个实例,其实质是判断A.prototype===instanceA.__p

  • 原生js实现复制对象、扩展对象 类似jquery中的extend()方法

    jq的extend()方法能很方便的实现扩展对象方法,语法如下:$.extend(obj1,boj2,obj3); 现在要实现的是:原生js实现复制对象,扩展对象,类似jq中的extend()方法,具体实例如下: 现有3个对象字面量: var o1={hello:1,old:555}, o2 = { abc: 55555555, hello: 2, fun: function() { alert(111); } }, o3={third:9999}; 实现目标: 复制o1对象,把 o2,o3的对

  • 浅谈js中的三种继承方式及其优缺点

    第一种,prototype的方式: //父类 function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = 'yellow'; this.view = function(){ return this.hair + ',' + this.eye + ',' + this.skin; } } //子类 function man(){ this.feature = ['beard','strong']; } man.pr

  • js 中rewrap-ajax.js插件实例代码

    最近写了一个JS插件,用圈内的话说叫造了个轮子,造的好与不好都不是自己说了算,关键还是大家用的好与不好. 当然我自己也在使用,由于个人偏爱与喜好,所以未能借签其他Ajax框架的写法,目前的版本都是以版本一进行往上整合的成果,所以你想要全面了解内部的结构,可以先从版本一开始看起. 现在我们说说整体的设计结构,版本一是好友收集整理的方法,基础的写法已经成型,调用nativeAjax方放即可,方法内部有三个参数,第一个为ajax的属性,第二个为成功的函数,第三个为错误的函数,具体如下: nativeA

随机推荐