简化的 Ext 原型链的类设计
function A() {
alert('a');
}
function B() {
B.superclass.constructor.call(this);
}
function temp() {
}
temp.prototype = A.prototype;
//防止A 的实例属性也搞到 B 里去 ,没有意思,我们只需要 A 的 prototype 里的公共属性
//不能使用 B.prototype=A.prototype 这样的话修改 B.prototype 则 A.prototype 也变了,以及影响instanceof
//不建议 B.prototype =new A() ;这样的话 A 的实例方法也到 B.prototype 里去了
B.prototype = new temp();
//上一步后 B 的实例的构造函数属性为 A 了,
// B.prototype.constructor == A
//为了以后方便B的子类调用B的构造函数
//如 C.superclass.constructor.call(this);
//要纠正
//B 的实例 的 构造函数属性要设为 B
B.prototype.constructor = B;
//要记录 B 的父亲,便于以后调用父亲方法
B.superclass = A.prototype;
if (A.prototype.constructor == Object.prototype.constructor) {
A.prototype.constructor = A;
}
简要分析:
1.temp 作为一个空函数,将用它创建的一个对象实例插入到原型链中。这样做可以避免创建超类的新实例,因为他可能比较庞大,而且有时超类的构造函数有一些副作用(超类实例的数据属性到子类的原型中),或者会执行一些需要大量计算的任务。
2.最后三行代码则用来确保超类的 prototype 的 constructor 属性已经被正确设置(即使超类就是Object类本身),在用到这个新的superclass属性调用超类的构造函数时这个问题很重要。
3.最后一行是为了如果父类的 constructor 被重置了,这时候就要设回来,
我怀疑是不是 extjs 担心 这样定义类
function x() {}
x.prototype = {
y: function() {}
};
这样的话 x.prototype.constructor == Object.prototype.constructor 了 ,继承 x 时需要重置 x.prototype.constructor = x,
这样才能子类 sub 继承 x 时, sub.superclass.constructor == x
,但是正确的定义应该是
x.prototype.y=function(){}
他是为了预防第一种定义原型方法吧
,我一直觉得整个设置
x.prototype={};
是不好的,它把constructor也覆盖了
,应该是 x.prototype.y=....或者一些工具函数比如
ext的override 等等
。
总之上述代码完美实现了一个类原型继承链,并且可以有子类显式调用父类构造函数了。
PS: instanceof 问题
instanceof 表面来看是来判断是否对象是某个函数new出来的,但实际上只是在原型链的比较操作:
看个例子:
function p(){}
function c(){}
c.prototype=p.prototype;
function d(){}
d.prototype=p.prototype;
var a=new d();
alert(a instanceof c);
意外么?所以我们不建议直接
function p(){}
function c(){}
c.prototype=p.prototype;
ejohn 在一篇文章
中提到的 instanceof 机制模拟
function instanceOf(object, constructor) {
while (object != null) {
if (object == constructor.prototype)
return true;
object = Object.getPrototypeOf(object);
}
return false;
}
function p(){}
function c(){}
c.prototype=p.prototype;
function d(){}
d.prototype=p.prototype;
var a=new d();
alert(instanceOf(a,c))
现在明白了吧。其中 getPrototypeOf 为ecmascript标准中的获得对象内部 _proto_ 属性,指向它的构造函数的 prototype.(IE没有实现哦)。
ps2 : 实例属性问题
function xy(){
}
xy.prototype.z={q:1};
var x=new xy();
alert(x.z.q);
//可以吧这句代码注释掉,看看前后结果
x.z={q:3};
alert(xy.prototype.z.q);
x.z.q=2;
alert(xy.prototype.z.q);
简要分析:
1.对象读取属性时,(若该属性对象本身没有) 会向类的prototype相应属性查看读取。
2.对象设置属性时,会直接修改自身的属性,和类的prototype相应属性无关。
3.x.z.q=1 读分析
:x.z 读取的是 ,(若z不存在x本身属性),
类的prototype相应属性
,x.z.q 则设置了原型z属性的 q值。
4.x.z={q:3} 写分析:
若直接设置 x.z 则设置的是
x对象本身的属性
,和
类的prototype相应属性z无关
。
总之是:由于原型链机制而导致的读和写的不对等性造成的。
分享到:
相关推荐
extjs组建继承结构图 让你了解extjs的整个架构!
ExtJS6 viewModel继承 viewModel各级控件继承演示,动态改变viewModel 详见文章解释 https://blog.csdn.net/ZYD45/article/details/87867454
Extjs 组件继承结构图,亲手整理,可用于Extjs学习时快速理清组件之间的关系
EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用
extjs资料extjs资料extjs资料extjs资料extjs资料
Extjs例子Extjs例子Extjs例子Extjs例子Extjs例子
ExtJs组件类的对应表,很好的,分享给大家!!
本文适合有一定javascript基础(明确js的面向对象,继承,作用域等)并能熟练使用extjs框架(明确各组件间的继承关系)的人阅读,目的在于对extjs的前台架构进行性能上的优化,核心思想为:“按需索取,晚使用,晚加载...
ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS...
EXTJS4自学手册——EXT数据结构组件(proxy代理类之客户端代理) EXTJS4自学手册——EXT数据结构组件(proxy代理类之服务器端代理) EXTJS4自学手册——EXT数据结构组件(store) 三、Extjs布局 EXTJS4自学手册——...
xtJs已经升级到了5.0了,目前可能多数应用还在使用ExtJs 3.系列。 从开发大型的web后台或者企业管理系统来看,ExtJs3的缺陷还是比较明显的,从ExtJs4 开始引入了MVC架构,从而能够从容的组织系统的JS文件了。 从...
extjs电子书,extjs电子书,extjs电子书,extjs电子书
EXTJS实例 EXTJS树,可以编辑的EXTJS,EXTJS3.0
extJs3升级extjs4方案, extJs3升级extjs4需要修改大量代码
extjsapi,extjs文档,api手岫
适合ExtJs开发人员extjs技术上手以及深入
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
JBPM4 SSH EXTJS JBPM SSH EXTJS JBPM4 SSH EXTJS JBPM SSH EXTJS JBPM4 SSH EXTJS JBPM SSH EXTJS JBPM4 SSH EXTJS JBPM SSH EXTJS 希望对大家有帮助。
extjs4.0 技术中文视频讲解,内容非常的全,而且讲的也不错,这是第一部分,里面有下载地址 可用迅雷... 第九讲:extjs4.0的core包和Ext类 第十讲:extjs4.0的util包 论坛地址是: http://www.uspcat.com/?fromuid=413
里面包含Extjs 2.2和Extjs 3.2.1版本两个文件