extend()如何在jQuery中工作?

我在一个插件中看到了这个:

var options = $.extend(defaults, options); 

它是如何工作的?

extend()做什么的?

多个参数

这个文档在解释扩展工作方面不够精确,于是我进行了一些testing:

 var a = {foo: 1, bar: 1}; var b = {foo: 2, baz: 2}; var c = {foo: 3}; var r = jQuery.extend(a,b,c); console.log("A: Foo=" + a.foo + " Bar=" + a.bar + " Baz=" + a.baz); console.log("B: Foo=" + b.foo + " Bar=" + b.bar + " Baz=" + b.baz); console.log("C: Foo=" + c.foo + " Bar=" + c.bar + " Baz=" + c.baz); console.log("R: Foo=" + r.foo + " Bar=" + r.bar + " Baz=" + r.baz); console.log("A === R?: " + (a === r)); 

console.log函数的目的是在Firebug中工作;如果你喜欢,可以用alert()或其他一些输出函数来代替它)。

结果是:

 A: Foo=3 Bar=1 Baz=2 B: Foo=2 Bar=undefined Baz=2 C: Foo=3 Bar=undefined Baz=undefined R: Foo=3 Bar=1 Baz=2 A === R?: true 

通过这个,我们可以看到jQuery.extend():

  • 从第一个参数提供的对象开始。
  • 在第二个参数中添加任何属性。 如果该属性已经存在于第一个参数中,它将被覆盖。 第二个参数的对象不变。
  • 用任何后续参数重复上述操作。
  • 返回第一个参数。

这对于将用户和默认选项对象组合在一起以获得一组完整的选项非常有用:

 function foo(userOptions) { var defaultOptions = { foo: 2, bar: 2 }; var someOtherDefaultOptions = { baz: 3 }; var allOptions = jQuery.extend( defaultOptions, someOtherDefaultOptions, userOptions ); doSomething(allOptions); } foo({foo:1, baz:1}); 

请注意,“null”是覆盖的有效值,但“undefined”不是。 你可能可以使用这个。

 var a = {foo: "a", bar: "a"}; var b = {foo: null, bar: undefined}; jQuery.extend(a,b); console.log("A: Foo=" + a.foo + " Bar=" + a.bar); 

结果是:

 A: Foo=null Bar=a 

单参数

如果只向jQuery.extend()传递一个对象,那么jQuery假定jQuery对象本身是“第一个”参数(即:要修改的那个),而您的对象是“第二个”(即:添加到第一个)。 所以:

 console.log( "Before: " + jQuery.foo ); jQuery.extend({foo:1}); console.log( "After: " + jQuery.foo ); 

结果是:

 Before: undefined After: 1 

从jQuery文档

将两个或更多对象的内容合并到第一个对象中。

在插件上下文中:如果用户没有为该函数设置可选参数,则将使用默认值。

它将一个对象的内容合并到另一个对象 。 如果我们传递两个对象,则将第二个对象属性添加到第一个对象/第一个参数

 Ex: $.extend(object1, object2); 

现在object1包含object2的属性

如果我们想合并两个对象 ,那么我们需要在第一个参数中传递空对象

 Ex: var newObject = $.extend({}, object1, object2); 

现在newObject包含object1和object2的属性

jQuery文档中有一个完美的例子: .extend()方法

extend()如何在jQuery中工作? [解决]

jQuery有深度复制和轻量级复制。 第一个布尔值决定它,对于深度而言是真的,对于光是假的。

例如:

  • jQuery.extend(false,{'a':{'a1':1}},{'a':{'a2':2}})

    结果将是:{'a':{'a2':2}},因为这是轻的副本只是比较级别1。

    在这里输入图像说明

  • jQuery.extend(true,{'a':{'a1':1}},{'a':{'a2':2}})

    结果将是:{'a':{'a1':1,'a2':2}}这是深层复制与许多级别的对象(就像数组的级别)

    在这里输入图像说明

  • jQuery.extend(a,b,c)与a,b,c是对象或数组。 stream溢出将是b-> a,c – > a(b覆盖a,c覆盖a …)这个函数将返回一个也是一个变化值。

高级示例:

  • jQuery.extend({'number_param':1})

    如果你只是通过一个参数。 jQuery将自行扩展。 console.log(jQuery ['number_param'])将输出1。

    在这里输入图像说明

  • jQuery.extend(1,{'number_param':'2'}); 这个例子不是附加jQuery本身。 第一个参数必须是布尔值。 在这种情况下,它将返回{'number_param':'2'}和jQuery不会得到更新。

    在这里输入图像说明

  • jQuery.extend(a,b,c,d,e,f); 订单合并将是。 b – > a,c – > a,d – > a,e – > a,f – > a(b覆盖a,c覆盖a …)。 而结果回报将是一个。

    用a = {'p':1}。 jQuery.extend(a,{'p':2},{'p':3},{'p':4},{'p':5})将返回a和a = {'p': 6}。 传递给这个函数的数字参数是无限的。

    在这里输入图像说明

目的是扩展一个现有的对象。 例如,如果我们有一个模板对象,我们想通过添加更多的属性或覆盖现有的属性来扩展,jquery扩展可以是有用的。

 var carObjectTemplate = { "make": "honda", "model":"city", "mileage":"20", "variant":"petrol" 

};

现在如果我们想扩展它, $.extend(true, {"color":"red"}, carObjectTemplate, {"model": 'amaze'}); 它会给我们输出,扩展carObjectTemplate并添加

 {"color":"red"} property and overriding "model" property from "city" to "amaze" 

第一个布尔参数true / false是表示我们是否需要一个深层或浅层的副本

它完全是这样的

说明 :将两个或多个对象的内容合并到第一个对象中。

更多在jQuery.extend()

回答“它是如何工作的?” – 这里没有人试图去做。

这是一个非常简化的版本。

 function extend ( target, src ) { // convert all arguments ( even those unseen in the function arity ) // to an array var args = Array.prototype.slice.call ( arguments ), deep = false; if ( typeof target === 'boolean' && target === true ) { // recursive copy // remove deep copy flag from the arguments list deep = args.shift (); // copy to the original target target = args.shift (); } for ( var i = 0, l = args.length; i < l; i = i + 1 ) { src = args [ i ]; if ( src ) { for ( var key in src) { if ( Object.hasOwnProperty ( src, key ) ) { if ( deep && typeof src [ key ] === 'object' ) { // warning this is only a simple version // doesn't handle arrays specifically // but rather converts them to a plain object target [ key ] = extend ( deep, {}, src [ key ] ); } else { target [ key ] = src[ key ]; } } } } } return target; } 

这是实际方法的最新来源