extjs的apply,applyIf和merge用法及原理剖析

extjs的apply,applyIf和merge都用来操作2个对象并生成新对象，在实现结果上是有区别的，下面来看下他们的区别：

先定义2个对象：

var obj1 = {
            a: '语文',
            b: ['美术1', '美术2'],
            c: true,
            d: {
                d1: 2000,
                d2: '你好',
                d3: true,
                d4: {
                    d41:200,
                    d42:100
                }
            }
        };

        var obj2 = {
            a: '数学',
            b: ['美术1', '美术2', '美术3', '美术4'],
            d: {
                d1: 40000,
                d2: '你坏',
                d4: {
                    d41:100,
                    d43:800,
                },
                d5: 'lala'
            },
            e: 100
        };

1、apply方法

var newobj=Ext.apply(obj1,obj2);
console.log('obj1='+JSON.stringify(obj1));
console.log('obj2='+JSON.stringify(obj2));
console.log('newobj='+JSON.stringify(newobj));

结果如下：

obj1={"a":"数学","b":["美术1","美术2","美术3","美术4"],"c":true,"d":{"d1":40000,"d2":"你坏","d4":{"d41":100,"d43":800},"d5":"lala"},"e":100}

obj2={"a":"数学","b":["美术1","美术2","美术3","美术4"],"d":{"d1":40000,"d2":"你坏","d4":{"d41":100,"d43":800},"d5":"lala"},"e":100}

newobj={"a":"数学","b":["美术1","美术2","美术3","美术4"],"c":true,"d":{"d1":40000,"d2":"你坏","d4":{"d41":100,"d43":800},"d5":"lala"},"e":100}

apply的方法的源代码：

Ext.apply = function(q, p, s) {
        if (s) {
            Ext.apply(q, s)
        }
        if (q && p && typeof p === "object") {
            var r, o, n;
            for (r in p) {
                q[r] = p[r]
            }
            if (l) {
                for (o = l.length; o--;) {
                    n = l[o];
                    if (p.hasOwnProperty(n)) {
                        q[n] = p[n]
                    }
                }
            }
        }
        return q
    };

从代码中可以看出apply方法处理对象的多层属性，

obj1和obj2都有的属性，obj2属性值覆盖obj1

obj1有而obj2没有的属性，顶层保留属性，顶层以下删除属性

obj1没有而obj2有的属性，obj1新增属性

2、applyIf方法

var newobj=Ext.applyIf(obj1,obj2);
console.log('obj1='+JSON.stringify(obj1));
console.log('obj2='+JSON.stringify(obj2));
console.log('newobj='+JSON.stringify(newobj));

结果如下：

obj1={"a":"语文","b":["美术1","美术2"],"c":true,"d":{"d1":2000,"d2":"你好","d3":true,"d4":{"d41":200,"d42":100}},"e":100}

obj2={"a":"数学","b":["美术1","美术2","美术3","美术4"],"d":{"d1":40000,"d2":"你坏","d4":{"d41":100,"d43":800},"d5":"lala"},"e":100}

newobj={"a":"语文","b":["美术1","美术2"],"c":true,"d":{"d1":2000,"d2":"你好","d3":true,"d4":{"d41":200,"d42":100}},"e":100}

applyIf的方法的源代码：

applyIf: function(o, n) {
            var p;
            if (o) {
                for (p in n) {
                    if (o[p] === undefined) {
                        o[p] = n[p]
                    }
                }
            }
            return o
        },

从代码中可以看出applyIf方法只处理对象的顶层属性，，顶层以下属性照抄obj1

顶层obj1没有而obj2有的属性，obj1新增属性，其他属性照抄obj1

3、merge方法

var newobj=Ext.merge(obj1,obj2);
console.log('obj1='+JSON.stringify(obj1));
console.log('obj2='+JSON.stringify(obj2));
console.log('newobj='+JSON.stringify(newobj));

结果如下：

obj1={"a":"数学","b":["美术1","美术2","美术3","美术4"],"c":true,"d":{"d1":40000,"d2":"你坏","d3":true,"d4":{"d41":100,"d42":100,"d43":800},"d5":"lala"},"e":100}

obj2={"a":"数学","b":["美术1","美术2","美术3","美术4"],"d":{"d1":40000,"d2":"你坏","d4":{"d41":100,"d43":800},"d5":"lala"},"e":100}

newobj={"a":"数学","b":["美术1","美术2","美术3","美术4"],"c":true,"d":{"d1":40000,"d2":"你坏","d3":true,"d4":{"d41":100,"d42":100,"d43":800},"d5":"lala"},"e":100}

merge方法处理对象的多层属性，

obj1和obj2都有的属性，obj2属性值覆盖obj1

obj1有而obj2没有的属性，保留属性

obj1没有而obj2有的属性，obj1新增属性

比较后发现apply,applyIf和merge方法执行后newobj会覆盖obj1，他们的值是一样的。