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

来源:互联网 时间:2017-01-22

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 };


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



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



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



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

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新增属性

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


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

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

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

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


相关阅读:
Top