Tôi thấy điều này trong một plugin:

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

Làm thế nào nó hoạt động?

Làm gì extend()?

Nhiều tham số

Tài liệu không chính xác trong việc giải thích cách mở rộng hoạt động, vì vậy tôi đã chạy một thử nghiệm nhỏ:

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.logHàm dự định hoạt động trong Firebug; thay thế nó bằng alert () hoặc một số hàm đầu ra khác nếu bạn muốn).

Kết quả là:

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

Bằng cách này, chúng ta có thể thấy rằng jQuery.extend ():

• Bắt đầu với đối tượng được cung cấp bởi tham số đầu tiên.
• Thêm vào nó bất kỳ thuộc tính nào trong tham số thứ hai. Nếu thuộc tính đã tồn tại trong tham số đầu tiên, nó sẽ bị ghi đè. Đối tượng cho tham số thứ hai là không thay đổi.
• Lặp lại điều trên với bất kỳ tham số tiếp theo nào.
• Trả về tham số đầu tiên.

Điều này hữu ích để kết hợp người dùng và đối tượng tùy chọn mặc định với nhau để có được một bộ tùy chọn hoàn chỉnh:

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

Lưu ý rằng "null" là giá trị hợp lệ để ghi đè, nhưng "undefined" thì không. Bạn có thể tận dụng điều này.

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

Kết quả trong:

A: Foo=null Bar=a

Tham số đơn

Nếu bạn chỉ truyền một đối tượng vào jQuery.extend(), thì jQuery giả định rằng bản thânjQuery đối tượng đó là tham số "đầu tiên" (nghĩa là: đối tượng được sửa đổi) và đối tượng của bạn là "thứ hai" (nghĩa là: đối tượng cần thêm vào đầu tiên) . Vì thế:

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

Kết quả trong:

Before: undefined
After: 1

Nó kết hợp nội dung của đối tượng này với đối tượng khác . Nếu chúng ta truyền hai đối tượng, thuộc tính đối tượng thứ hai được thêm vào đối tượng đầu tiên / tham số đầu tiên

Ex: $.extend(object1, object2);

Bây giờ object1 chứa các thuộc tính của object2

Nếu chúng ta muốn hợp nhất hai đối tượng , thì chúng ta cần truyền đối tượng trống trong tham số đầu tiên

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

Bây giờ newObject chứa cả hai thuộc tính của object1 và object2 .

Từ tài liệu jQuery

Hợp nhất nội dung của hai hoặc nhiều đối tượng với nhau thành đối tượng đầu tiên.

Trong ngữ cảnh plugin: Nếu người dùng không đặt các tham số tùy chọn cho hàm, thì giá trị mặc định sẽ được sử dụng thay thế.

Mở rộng () hoạt động như thế nào trong jQuery? [Đã giải quyết]

jQuery có bản sao sâu và bản sao nhẹ. Boolean đầu tiên quyết định điều đó, đúng với độ sâu và sai đối với ánh sáng.

Ví dụ:

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

  kết quả sẽ là: {'a': {'a2': 2}} vì đây là bản sao nhẹ chỉ so sánh cấp 1.

  

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

  kết quả sẽ là: {'a': {'a1': 1, 'a2': 2}} Đây là bản sao sâu với nhiều cấp độ đối tượng (giống như cấp độ của mảng)

  

• jQuery.extend (a, b, c) với a, b, c là đối tượng hoặc mảng. Ghi đè luồng sẽ là b-> a, c -> a (b ghi đè a, c ghi đè a ...) hàm này sẽ trả về a và a cũng thay đổi giá trị.

Ví dụ nâng cao:

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

  Trong trường hợp bạn chỉ vượt qua một tham số. jQuery sẽ tự mở rộng. console.log (jQuery ['number_param']) sẽ xuất ra 1.

  

• jQuery.extend (1, {'number_param': '2'}); Ví dụ này không phải là thêm chính jQuery. Tham số đầu tiên phải là boolean. Trong trường hợp này, nó sẽ trả về {'number_param': '2'} và jQuery không được cập nhật.

  

• jQuery.extend (a, b, c, d, e, f); Hợp nhất đơn hàng sẽ được. b -> a, c -> a, d -> a, e -> a, f -> a (b ghi đè a, c ghi đè a ...). Và kết quả trả về sẽ là a.

  với a = {'p': 1}. jQuery.extend (a, {'p': 2}, {'p': 3}, {'p': 4}, {'p': 5}) sẽ trả về a và a = {'p': 6}. Số tham số truyền vào hàm này là không giới hạn.

  

Mục đích là để mở rộng một đối tượng hiện có. Ví dụ: nếu chúng ta có một đối tượng mẫu và chúng ta muốn mở rộng đối tượng đó bằng cách thêm nhiều thuộc tính hơn hoặc ghi đè các thuộc tính hiện có, jquery extension có thể hữu ích.

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

};

bây giờ nếu chúng tôi muốn mở rộng nó, $.extend(true, {"color":"red"}, carObjectTemplate, {"model": 'amaze'}); nó sẽ cung cấp cho chúng tôi, mở rộng carObjectTemplate và thêm

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

tham số boolean đầu tiên true / false là cho biết chúng ta cần một bản sao sâu hay nông

Nó thực hiện chính xác điều này

Mô tả : Hợp nhất nội dung của hai hoặc nhiều đối tượng với nhau thành đối tượng đầu tiên.

Thêm tại jQuery.extend ()