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

最新推荐文章于 2020-05-27 11:02:55 发布

原创最新推荐文章于 2020-05-27 11:02:55 发布 · 196 阅读

0 ·

CC 4.0 BY-SA版权

EXT 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了Ext.js库中的apply、applyIf和extend方法的使用方式，包括它们如何进行对象属性的复制和继承，并通过代码示例展示了实际应用。文章深入分析了这些方法的区别，帮助开发者更好地理解和运用Ext.js提供的对象操作功能。

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/

Ext 中 apply 及 applyIf 方法的应用

A、引言

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

B、官方说明

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

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

applyIf( Object obj, Object config ) : Object

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

apply 及 applyIf 方法都是用于实现把一个对象中的属性应用于另外一个对象中，相当于属性拷贝。不同的是 apply 将会覆盖目标对象中的属性，而 applyIf 只拷贝目标对象中没有而源对象中有的属性。

apply 方法的签名为“ apply ( Object obj , Object config , Object defaults ) : Object ”，该方法包含三个参数，第一个参数是要拷贝的目标对象，第二个参数是拷贝的源对象，第三个参数是可选的，表示给目标对象提供一个默认值。可以简单的理解成把第三个参数（如果有的话）及第二个参数中的属性拷贝给第一个参数对象。看下面的代码：

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方法也可以被复制和使用

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

b2.f2();

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

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

alert(b2.p3)

});

</script>

在上面的代码中， Ext . apply ( b2 , b1 )这一语句把 b1 的属性拷贝到了 b2 对象中，因此调用 b2 的 f1 方法可以弹出 "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" 。