extend ()는 jQuery에서 어떻게 작동합니까?


119

나는 이것을 플러그인에서 보았다.

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

어떻게 작동합니까?

무엇을 extend()합니까?


1
jQuery 문서에서 읽을 수 있지만 이것이 더 나은 설명 이라고 생각 합니다.
ifaour 2010

jQuery에는 좋은 문서가 있습니다. api.jquery.com Search jQuery 필드 에 메소드 이름을 입력하기 만하면 됩니다.
user113716 2010

42
나는 Todd가 jQuery.extend가 어떻게 사용되는지가 아니라 어떻게 작동하는지 알고 싶어한다고 생각합니다. 예를 들어, 완전히 새로운 객체를 만들기 위해 각 속성을 반복합니까, 아니면 멋진 방식으로 프로토 타입 상속을 사용합니까?
b01 2013 년

답변:


178

여러 매개 변수

문서는 extend가 어떻게 작동하는지 설명하는 데 정확하지 않으므로 약간의 테스트를 실행했습니다.

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

3
그래서 b.baz가 {zed: 'dark'}아니라 2당신이 설정 한 객체 r.baz.zed = 'light'라면,의 값은 무엇 b.baz.zed입니까? 즉, 속성이 참조로 복사 또는 병합됩니까?
ErichBSchulz

4
내 자신의 질문에 대답하는 b.baz.zedlight- 즉, 값은 참조로 병합됩니다. 참조 바이올린
ErichBSchulz

4
화려한 설명, +1
Carrie Kendall 2011

2
공식 문서가 이만큼 명확 해 졌으면합니다. +1
Thariq Nugrohotomo 2015 년

2
$ .extend (true, object1, object2); 및 $ .extend (object1, object2); 차이 ...
Vinay S Jain

27

그것은 또 다른 하나의 객체의 내용을 병합합니다 . 두 개체를 전달하면 두 번째 개체 속성이 첫 번째 개체 / 첫 번째 매개 변수에 추가됩니다.

Ex: $.extend(object1, object2);

이제 object1에는 object2의 속성이 포함됩니다.

두 객체병합 하려면 첫 번째 매개 변수에 빈 객체를 전달해야합니다.

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

이제 NewObject에는 오브젝트 1 및 object2의 두 속성이 포함되어 있습니다 .


12

jQuery 문서에서

두 개 이상의 개체의 내용을 첫 번째 개체로 병합합니다.

플러그인 컨텍스트에서 : 사용자가 함수에 대한 선택적 매개 변수를 설정하지 않으면 대신 기본값이 사용됩니다.


1
이 답변은 의견에 있어야합니다.
Nolo

JOBG 감사합니다 !!
Harsha Vardhan

7

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}. 이 함수에 전달되는 매개 변수 수는 무제한입니다.

    여기에 이미지 설명 입력


1
로부터 부두 "경고 : 첫 번째 인수에 대해 false를 전달은 지원되지 않습니다."
Nolo

2

목적은 기존 개체를 확장하는 것입니다. 예를 들어 템플릿 객체가 있고 더 많은 속성을 추가하거나 기존 속성을 재정 의하여이를 확장하려는 경우 jquery extend가 유용 할 수 있습니다.

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는 딥 또는 얕은 사본이 필요한지를 나타내는 것입니다.


딥 카피 또는 얕은 카피 란 무엇입니까?
Selva Ganapathi

0

정확히 이렇게

설명 : 두 개 이상의 개체의 내용을 첫 번째 개체로 병합합니다.

jQuery.extend () 자세히 알아보기


1
한 줄 답변과 문서 링크는 답변으로 많이 사용되지 않으며 댓글에 남겨야합니다.
Nolo
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.