jQuery的extend方法【三种】

jQuery的extend方法

jQuery.extend()方法在jQuery中用来扩展对象，它有三种用法，分别是浅扩展、深扩展和递归扩展。

一、浅扩展

浅扩展将目标对象和源对象的属性合并到目标对象中，如果源对象和目标对象中具有相同的属性，那么源对象的属性会覆盖目标对象的属性，在修改或添加对象属性上很常用。

语法：

jQuery.extend(target, object1, [object2])

示例1：

var target = {name: 'peter'};
var object1 = {age: 20};
var object2 = {name: 'john'};

jQuery.extend(target, object1, object2);

console.log(target); // 打印结果 {name: 'john', age: 20}

在示例1中，目标对象 target 的属性 name 被源对象 object2 中的 name 属性覆盖了。

示例2：

var target = {name: 'peter', age: 20};
var newObject = {age: 25, city: 'Shanghai'};

jQuery.extend(target, newObject);

console.log(target); // 打印结果 {name: 'peter', age: 25, city: 'Shanghai'}

在示例2中，目标对象 target 和源对象 newObject 中具有相同的属性 age，源对象的属性值 25 覆盖了目标对象中的属性值 20。

二、深扩展

深扩展是将源对象与目标对象属性进行递归合并，当源对象和目标对象的属性类型（属性的值）都是对象时，深扩展合并这些对象的属性。它递归遍历源对象和目标对象，如果同名属性都是普通对象，则合并，如果目标对象存在该属性的其他类型，则覆盖它的值。

语法：

jQuery.extend(true, target, object1, [object2])

示例3：

var deepTarget = {name: 'peter', contact: {email: '[e-mail]'}};
var deepObject = {contact: {phone: '1234567890', email: '[e-mail]'}, country: 'China'};

jQuery.extend(true, deepTarget, deepObject);

console.log(deepTarget); // 打印结果 {name: 'peter', contact: {email: '[e-mail]', phone: '1234567890'}, country: 'China'}

在示例3中，目标对象 deepTarget 和源对象 deepObject 的属性 email 覆盖了目标对象中的属性 email，同时 contact 对象合并了源对象和目标对象的属性。

三、递归扩展

递归扩展是对一个对象的属性进行深度扩展，如果对象中某个属性是对象，则递归扩展该对象的属性，直到扩展完所有的对象属性。

语法：

jQuery.fn.extend(object)

示例4：

var obj1 = {foo: 'bar'};
var obj2 = {foo2: 'bar2'};
var obj3 = jQuery.extend({}, obj1, obj2);

console.log(obj3); // 打印结果 {foo: 'bar', foo2: 'bar2'}

jQuery.fn.extend({
  myMethod: function() {
    console.log('I am a method of jQuery.fn.extend');
  },
  anotherMethod: function() {
    console.log('I am another method of jQuery.fn.extend');
  }
});

jQuery('h1').myMethod(); // 打印结果 I am a method of jQuery.fn.extend

在示例4中， obj1 和 obj2 执行浅扩展后，返回的对象作为新的目标对象返回，它们的属性被合并到了一起。同时，通过 jQuery.fn.extend 在 jQuery 对象的原型上添加了自定义的方法，它们可以在 jQuery 对象实例中直接调用。

总结

jQuery.extend()方法是方便的对象属性合并工具，它有三种用法可以满足不同情况下的对象属性需求，具有很好的可扩展性，可以自定义扩展和修改 jQuery 对象方法或属性。