`

Ext.apply、Ext.applyIf和Ext.extend的理解

    博客分类:
  • EXT
 
阅读更多

http://hi.baidu.com/tomte/item/1809eb6f513ee5156895e6bb

http://hi.baidu.com/tag/extjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/feeds

Ext.apply、Ext.applyIf和Ext.extend

Ext.apply(obj, config, [defaults]) 将config对象的所有属性都复制到另一个对象obj上, 第三个参数defaults可以用来提供默认值, 不过通常指用前两个参数就够了。 这个函数主要用在构造函数中, 用来将配置复制到对象上。


Ext.applyIf(obj, config) 和Ext.apply的功能类似, 唯一不同的是, 这个函数只会将config对象中有, 而obj对象中没有的属性复制到obj上。 Ext.extend(subclass, superclass, [overrides]) 用来继承已有的类, 通常的使用方法是 var SubClass = function() { SubClass.superclass.constructor.call(this); };


Ext.extend(SubClass, BaseClass, { newMethod : function() {}, overriddenMethod : function() {} };在上面的代码中, SubClass继承自BaseClass, 添加了新的方法newMethod, 重写了overriddenMethod方法。
apply方法的签名为“apply( Object obj, Object config, Object defaults ) : Object”,
第一个参数是要拷贝的目标对象,
第二个参数是拷贝的源对象,
第三个参数是可选的,表示给目标对象提供一个默认值。
可以简单的理解成把第三个参数(如果有的话)及第二个参数中的属性拷贝给第一个参数对象。

 

Ext源代码如下:
view plaincopy to clipboardprint?
/** 
* Copies all the properties of config to obj. 
* @param {Object} obj The receiver of the properties 
* @param {Object} config The source of the properties 
* @param {Object} defaults A different object that will also be applied for default values 
* @return {Object} returns obj 
* @member Ext apply 
*/ 
Ext.apply = function(o, c, defaults){   
    // no "this" reference for friendly out of scope calls   
    if(defaults){   
        Ext.apply(o, defaults);   
    }   
    if(o && c && typeof c == 'object'){   
        for(var p in c){   
            o[p] = c[p];   
        }   
    }   
    return o;   
}; 
/**
* Copies all the properties of config to obj.
* @param {Object} obj The receiver of the properties
* @param {Object} config The source of the properties
* @param {Object} defaults A different object that will also be applied for default values
* @return {Object} returns obj
* @member Ext apply
*/
Ext.apply = function(o, c, defaults){
    // no "this" reference for friendly out of scope calls
    if(defaults){
        Ext.apply(o, defaults);
    }
    if(o && c && typeof c == 'object'){
        for(var p in c){
            o[p] = c[p];
        }
    }
    return o;
}; 
另外还有ext.applyif 也是对象克隆,不同的是,克隆的对象并不会覆盖原有属性和方法
具体代码如下:
view plaincopy to clipboardprint?
applyIf : function(o, c){   
    if(o){   
        for(var p in c){   
            if(!Ext.isDefined(o[p])){   
                o[p] = c[p];   
            }   
        }   
    }   
    return o;   
},

http://leroyhzy.blog.163.com/blog/static/2098941532012725112516785/

ExtapplyapplyIf方法的应用
 

A、引言

Ext.applyExt.applyIf方法都是用于把一个对象中的属性复制到另外一个对象的属性中。两者的差异在于apply将会覆盖目标对象中的属性,而applyIf只复制目标对象中没有而源对象中有的属性。

 

B、官方说明

apply( Object obj, Object config, Object defaults ) : Object

该方法包含三个参数,第一个参数是要拷贝的目标对象,第二个参数是拷贝的源对象,第三个参数是可选的,表示给目标对象提供一个默认值。意味着如果第三个参数有值,则将第三个参数也复制到目标对象中。

applyIf( Object obj, Object config ) : Object

applyIf方法的功能跟apply一样,只是不会拷贝那些在目标对象及源对象都存在的属性。


        applyapplyIf方法都是用于实现把一个对象中的属性应用于另外一个对象中,相当于属性拷贝。不同的是apply将会覆盖目标对象中的属性,而applyIf只拷贝目标对象中没有而源对象中有的属性。
apply方法的签名为“apply(Object obj,Object config,Object defaults ):Object”,该方法包含三个参数,第一个参数是要拷贝的目标对象,第二个参数是拷贝的源对象,第三个参数是可选的,表示给目标对象提供一个默认值。可以简单的理解成把第三个参数(如果有的话)及第二个参数中的属性拷贝给第一个参数对象。看下面的代码:

    <script>

       Ext.onReady(function(){

           var b1 ={

              p1:"p1 value",

             

              p2:"p2 value",

             

              f1:function(){alert(this.p1)},

             

              f2:function(){alert(this.p2)}

           };

          

           var b2 =newObject();

          

           b2.p1="b2 value";

          

           Ext.apply(b2,b1);

          

           b2.f1();// 这个挺有意思,不仅属性会复制,b1中的f1方法也可以被复制和使用

// ( 有点费话,因为f1f2就是以属性的形式生命的 )

          

           b2.f2();

          

//会使得b2中包含一个p3的属性,值为"p3 value"

           Ext.apply(b2,b1,{p3:"p3 value"});

 

      

           alert(b2.p3)     

 

       });

    </script>


在上面的代码中,Ext.apply(b2,b1)这一语句把b1的属性拷贝到了b2对象中,因此调用b2f1方法可以弹出"p2 value"的提示信息。尽管b2对象已经包含了p2属性值,但拷贝后该属性值会被覆盖。可以在调用apply方法时,在第三个参数中指定拷贝属性的默认值,比如下面的代码:
Ext.apply(b2,b1,{p3:"p3 value"});

            alert(b2.p3);
这样会使得b2中包含一个p3的属性,值为"p3 value"
applyIf方法的功能跟apply一样,只是不会拷贝那些在目标对象及源对象都存在的属性。比如把前面演示apply方法的代码改成applyIf,如下:
Ext.applyIf(b2,b1);

            b2.f1();
由于b2中已经存在了p2属性,因此,b2.f1()方法中引用this.p2的时候,得到的是"b2 value",而不是在b1中定义的"p2 value"
分享到:
评论

相关推荐

    Ext Js权威指南(.zip.001

    4.1.2 apply和applyif方法 / 90 4.1.3 不推荐的extend方法 / 92 4.1.4 数据及其类型检测 / 95 4.1.5 其他的基础方法 / 99 4.2 为框架顺利运行提供支持 / 107 4.2.1 平台检测工具:ext.is / 107 4.2.2 当前...

    Ext深入浅出 数据传输

    11.1.6 apply和applyIf函数..........266 11.1.7 namespace函数.....................266 11.1.8 Ext.isEmpty函数.................267 11.1.9 Ext.each函数........................268 11.1.10 Ext.DomQuery ........

    精通JS脚本之ExtJS框架.part1.rar

    14.1 利用Ext.extend实现继承 14.2 与ExtJS扩展相关的预备知识 14.2.1 定义命名空间 14.2.2 使用xtype 14.3 用户扩展和插件 14.3.1 编写自定义用户扩展 14.3.2 常用插件UploadDialog 14.3.3 常用插件...

    精通JS脚本之ExtJS框架.part2.rar

    14.1 利用Ext.extend实现继承 14.2 与ExtJS扩展相关的预备知识 14.2.1 定义命名空间 14.2.2 使用xtype 14.3 用户扩展和插件 14.3.1 编写自定义用户扩展 14.3.2 常用插件UploadDialog 14.3.3 常用插件...

    ExtJs原生批量上传+实时进度

    extend: 'Ext.window.Window', height: 400, width: 700, title: '文件上传', closeAction: 'hide', maximizable: true, layout: 'fit', uploadParams: null, initComponent: function() { var me = ...

    ext-2.3.0+CKEditor 3.0.1+ckfinder_asp_1.4配置详解及工程源码

    Ext.extend(Ext.form.CKEditor, Ext.form.TextArea, { onRender : function(ct, position){ if(!this.el){ this.defaultAutoCreate = { tag: "textarea", autocomplete: "off" }; } Ext.form.TextArea....

    Extjs中ComboBoxTree实现的下拉框树效果(自写)

    最近涉及到的一个项目中,需要实现ComboBoxTree的效果,首先,看看效果吧…… 在Extjs中是没有这种效果的,所以... Ext.ux.TreeCombo.superclass.constructor.call(this, Ext.apply({ maxHeight: 300, editable: false

    button的js代码

    ButtonPanel = Ext.extend(Ext.Panel, { layout:'table', defaultType: 'button', baseCls: 'x-plain', cls: 'btn-panel', renderTo : 'docbody', menu: undefined, split: false, layoutConfig: { ...

    javascript 面向对象思想 附

    – ClassModel = //类模型,用于创建类 { create: function() { return function(){this.construct.apply(this,arguments);} } } Extend = function(desc, src) //模拟类继承, 将一个对象的所有成员 复制到 另一个...

    Universal-USB-Installer

    this License, whose permissions for other licensees extend to the entire whole, and thus to each and every part regardless of who wrote it. Thus, it is not the intent of this section to claim rights ...

Global site tag (gtag.js) - Google Analytics