我在插件中看到了这一点:
var options = $.extend(defaults, options);
它是如何工作的?
怎么extend()
办?
我在插件中看到了这一点:
var options = $.extend(defaults, options);
它是如何工作的?
怎么extend()
办?
Answers:
该文档在解释扩展如何工作时不够精确,因此我进行了一些测试:
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
{zed: 'dark'}
而不是2
您说而您设置了r.baz.zed = 'light'
,那么b.baz.zed
be 的值是多少?即属性是通过引用复制还是合并?
从jQuery文档
将两个或更多对象的内容合并到第一个对象中。
在插件上下文中:如果用户未设置该函数的可选参数,则将使用默认值。
extend()在jQuery中如何工作?[解决]
jQuery具有深层复制和浅层复制。第一个布尔值决定它,对于深度而言为true,对于光线而言为false。
例如:
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}}这是具有多个对象级别的深层副本(就像数组的级别一样)
具有a,b,c的jQuery.extend(a,b,c)是对象或数组。流覆盖将是b-> a,c-> a(b覆盖a,c覆盖a ...),此函数将返回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。
其中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表示我们是否需要深拷贝或浅拷贝