- 浏览: 1437921 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
luhouxiang:
写的很不错,学习了
Extjs 模块化动态加载js实践 -
kingkongtown:
如果想改成淘宝后台那样,可以在编辑器批量上传图片呢?
kissy editor 阶段体会 -
317966578:
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug:
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩:
怎么能让浏览器不进入 文档模式的quirks模式,进入标准的
浏览器模式与文本模式
看了第三章前半部分extend作者实现的superclass() 部分,不知道为何在分析extjs源码中途要创造这样一个继承机制,看起来像 crockford 的uber 方法,但是觉得有点问题啊,先记下来
作者实现:
extend : function() { // inline overrides var io = function(o) { for (var m in o) { this[m] = o[m]; } }; var oc = Object.prototype.constructor; var superclass = function(sp) { var s = function() { var name = (s.caller || {}).name; var len = arguments.length, t = this; var supper = arguments.callee.superclass; if (!name) for (var n in t) { if (t[n] == s.caller) { name = n; break; } } if (len > 0 && name) { //alert(name); var callArgs = Array.prototype.slice.call( arguments, 0); Array.prototype.splice.apply(callArgs, [0, 1]); return supper[name](callArgs); } return supper; } s.superclass = sp; return s; }; return function(sb, sp, overrides) { if (typeof sp == 'object') { overrides = sp; sp = sb; sb = overrides.constructor != oc ? overrides.constructor : function() { sp.apply(this, arguments); }; } var F = function() { }, sbp, spp = sp.prototype; F.prototype = spp; sbp = sb.prototype = new F(); sbp.constructor = sb; sb.superclass = spp; if (spp.constructor == oc) { spp.constructor = sp; } sb.override = function(o) { Ext.override(sb, o); }; sbp.override = io; Ext.override(sb, overrides); sb.extend = function(o) { Ext.extend(sb, o); }; sbp.superclass = superclass(spp); return sb; }; }(),
this.superclass() 实际上直接就访问到了父类构造函数的原型对象,那么以此为原理可以直接调用父类的方法,作者也说了这样的话对象实例(this)就丢掉了,到这还好。
例子: (下载)
不过我不大清楚这样子脱离了实例this的上下文调用还有什么用,就开始看例子,例子就很随意了:(稍微改了一下)
var Animal = function(q) { //alert("this is Animal constructor"); this.name = q[0][0].tag; this.age = q[0][0].age; }; Animal.prototype.getAge = function() { alert(this.name+"'age is "+this.age); }; Animal.prototype.getName = function() { // alert("this is the animal Name!"); }; var Cat = Ext.extend(Animal, { name : 'cat', age : 5, yy : 'aa', constructor : function() { //alert("this is Cat constructor"); this.superclass().constructor(arguments); }, getAge : function() { //alert(this.name + "'age is " + this.age); this.superclass().getAge(); this.name = 'modefy'; this.xx = 'aa'; //alert(this.yy); } }); var homeCat = function() { //alert("this is homeCat constructor"); this.superclass().constructor(arguments); }; Ext.extend(homeCat, Cat, { name : 'homeCat', age : 3, homeCat : true, getAge : function() { // alert(this.name+"'age is "+this.age); this.yy = 'yy'; this.superclass(this);// .getAge(); // alert(this.name); // alert(this.xx); } }); var myCat = new homeCat({age:99,tag:"first"}); myCat.getAge(); //console.dir(Animal.prototype); var myCat2 = new homeCat({age:-99,tag:"second"}); myCat2.getAge(); myCat.getAge();
调用代码:
var myCat = new homeCat({age:99,tag:"first"}); myCat.getAge(); //console.dir(Animal.prototype); var myCat2 = new homeCat({age:-99,tag:"second"}); myCat2.getAge(); myCat.getAge();
输出为:
first'age : 99
second'age -99
second'age -99
可见前面对象的父类数据已经被覆盖掉了.没有达到模拟传统面向对象语言继承的机制
分析:
1.this.superclass().constructor(arguments) ,这应该是完全不合道理的 ,要么用call,要么apply,直接传个arguments似乎不妥。
2.有上述可知:
this.superclass()为父类构造函数的原型,那么在原型调用函数 this.super().xx();那么在xx中的this就变成了当前函数原型对象,那么我如果修改了this的某个数据属性话,该原型所关联的所有对象实际上都发生了变化,并且完全改变了下面代码的语义:
var Animal = function(q) { alert("this is Animal constructor"); this.name = 'animal'; this.age = q; };
用this修改的是函数的原型对象,而不是实例对象本身了!
比如上述我传了个
var myCat = new homeCat(99); myCat.getAge();
那么执行后在firebug中查看
console.dir(Animal.prototype);
可见并应该与实例关联的数据却被关联到了公有的父类原型对象上面,作者想模拟传统面向对象的实例对象的父类数据部分是失败的,js中父类原型对象是公用的, 那么这样还有什么意义,生成多个对象的话,其父类的数据并不能保存下来,都被后来对象冲掉了。
3.总之:我觉得原型对象还是只用来保存函数以及一些所有实例对象都不变的数据比较好,其他对象关联数据就不要保存在里面了。
ps:书中出现这样一段:
this.superclass().getXY.apply(this,arguments)
更令我疑惑了,apply后获得了实例的this上下文,那么在父类 getXY 中再调用
this.superclass().getXY.apply(this,arguments)
岂不会造成死循环? this.superclass永远都是同一个new出来的实例对象的superclass而不会调用原型链往上的对应superclass
评论
这样就能达到我自己想要实现的目标。
要说明的是这种继承只是一种扩展,另一种选择。有一些情况还是适用的,在Js中的确做不到完全面向对象中的那样继承。
从形式上来看,这样不妥。但是从面对对象类的构造函数的角度来看,倒不是完全不能接受。这样无论如何都减化了extjs的继承方式。
this.superclass().getXX.apply(this,arguments)
extjs的继承也是需要采用apply或call来改变上下文作用域,如
Morik.Office.LeftMenu.superclass.initEvents.call(this);
可见其简化一些。
当然如果 采用this.superclass().getXX.apply(this,arguments)。
那么其父类中的getXX的作用域就是当前实例。getXX函数中一般不能采用
this.superclass().getXX.apply(this,arguments),这时得到的是当前实例的父亲类的getXX,而不是其祖父类中的getXX。所以在当前实例的父类不能改变上下文作用域。
说明了这种this继承方式的缺陷,也说明了如mootools中的this.supper有着同样的缺陷。
所以我在书中说明了,如果是最终类(没有子类),则可以采用了这种this.superclass().getXX.apply(this,arguments)方式,对于非最终类,采用extjs的继承方式。
而我们写的大量的类一般都是最终类。
另外书中的例子并不是很随意采用的,它采用了mootools讲解继承关系的实例。
有什么问题,请继续探讨。
发表评论
-
continuation, cps
2013-09-12 16:49 2732起 随着 nodejs 的兴起,异步编程成为一种潮流 ... -
一种基于匹配回朔的 css3 选择器引擎实现
2013-05-07 20:40 3356一种基于匹配回朔的 css3 选择器引擎实现 介绍 C ... -
cubic-bezier 模拟实现
2013-01-05 16:34 14027cubic-bezier 曲线是 css3 动画的一个重要基石 ... -
构建前端 DSL
2012-10-11 22:10 5292目前在传统的软件开 ... -
Get cursor position and coordinates from textarea
2012-04-10 20:50 4943最近需要从 textarea 中获 ... -
兼容 ie 的 transform
2012-02-23 14:00 6349css 2d transform 是 css3 引入的一个新的 ... -
promise api 与应用场景
2012-02-07 17:34 7299promise 是 commonjs 社区中提出的异步规范,其 ... -
closure compiler 代码优化实例
2012-01-08 03:23 2780closure compiler 可以进行不少有意思的优化 ... -
write html parser
2011-12-01 02:48 2863首先需要声明 html 不能用正则表达式来直接匹配进行内容抽取 ... -
获取剪贴板数据
2011-11-07 23:31 6396兼容性: 获取剪贴板数据这块各个浏览器间存在很大的 ... -
url 映射问题
2011-11-07 21:52 3173背景 url mapping 我最早知道是作为 j ... -
tip:如何原生播放声音
2011-10-19 12:45 2910如果不想考虑浏览器间 ... -
转载:瀑布流布局浅析
2011-09-29 19:02 2798简介 如果你经 ... -
cross domain request
2011-09-29 18:39 2803场景 跨域请求是随着 ... -
基于多继承的树设计
2011-09-18 03:42 2219分类 树是一种常见 ... -
caja 原理 : 前端
2011-09-01 16:48 6963作为前端开放的基础安全保证,caja 是目前比较合 ... -
tokenization of html
2011-08-29 22:38 2693html 符号解析问题 场景: 在页面上输出包 ... -
ie 下 cloneNode 导致的属性克隆
2011-08-24 16:10 2426这个还是很值得记下,一直存在的很大隐患终于解决,由于在 ie& ... -
循环引用下的深度克隆
2011-08-04 20:39 2241深度复制和浅度复制 是当初初学 c 遇到的第一批问题,似乎使 ... -
模块的静态与动态循环依赖
2011-07-25 03:43 3210场景: 循环依赖 我是不支持的,但现实中似乎又确实需 ...
相关推荐
Ext JS源码分析与开发实例宝典光盘源码Ext JS源码分析与开发实例宝典光盘源码Ext JS源码分析与开发实例宝典光盘源码Ext JS源码分析与开发实例宝典光盘源码Ext JS源码分析与开发实例宝典光盘源码Ext JS源码分析与开发...
EXTJS源码分析与开发实例,还不错的资源,是值得一看的数据哈
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
资源名称:Ext JS源码分析与开发实例宝典内容简介:本书全面系统地剖析了ExtJS 3.0的架构设计原理。通过对源码的“抽丝剥茧”,读者可以掌握Ext JS架构的精妙,从原理层面用活Ext JS。此外,本书还提出了大量的解决...
基于元素的开发部分讲解了在DOM元素基 础上扩展的Ext JS元素,包括元素操作、元素查找、元素样式、动画特效和拖曳实现。深入组件的开 发部分讲解Ext JS组件的原理及各大组件的应用,包括组件模型、容器模型、布局...
书中的代码分三卷。我上传的pdf书分12卷(pdf带完整的书签目录) 需要的可以下载.其他地方是找不到的。书签目录是本人自己做的.
ExtJS3.0 源码分析与开发实例宝典
Ext+JS源码分析与开发实例宝典 是extjs3.0的学习书 书得内容很不错。深入解析extjs 资源是pdf文档. 本人自己还做了pdf的完整书签目录,便于方便和阅读. 文档比较大,一共压缩成12卷.需12卷全部下载完。 就第一个...
《ExtJS源码分析与开发实例宝典》是一本不错的关于ExtJS开发实践的教程,特附上源码,与各位共享,谢谢。
extjs源码分析与开发实例宝典PDF格式文件
extjs源码分析与开发实例宝典part10共10卷
extjs源码分析与开发实例宝典part07共10个分卷
extjs源码分析与开发实例宝典part06 pdf格式文档 共10卷