jQuery를 확장() 방법

오늘 포스팅에서는 둘 이상의 객체의 속성을 병합하는 jQuery의 extend() 메서드에 대해 알아봅니다.

jQuery의 extend()

jQuery는 둘 이상의 객체의 내용을 대상 객체로 병합하는 내장 메서드 .extend()를 제공합니다. 두 개 이상의 객체가 .extend()에 인수로 전달되면 모든 객체의 속성이 대상 객체에 추가됩니다.

개체를 병합하는 동안 Null 또는 undefined 인수는 무시됩니다.

통사론:

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

1. deep은 부울 매개변수입니다. 병합은 true로 지정된 경우 재귀적입니다.
2. 대상은 새 속성을 받을 개체입니다.
3. object1은 병합할 추가 속성을 포함하는 개체입니다.

$.extend()에 하나의 인수만 전달되면 target 인수가 생략되었음을 나타냅니다. 이 경우 jQuery 개체 자체가 대상 개체가 됩니다.

이 기능을 사용하면 jQuery 네임스페이스에 새로운 기능을 제공할 수 있습니다. 이는 jQuery에 새 메서드를 추가해야 하는 플러그인 작성자에게 도움이 될 수 있습니다.

기본적으로 $.extend()는 비재귀 병합을 수행합니다. 대상 개체의 속성 자체가 개체 또는 배열이라고 가정합니다.

이 경우 두 번째 또는 후속 객체에서 동일한 키를 가진 속성으로 완전히 재정의됩니다.

$.extend() 함수의 첫 번째 인수로 true를 전달하면 객체가 재귀적으로 병합됩니다. 그러나 개체의 프로토타입에서 상속된 속성은 복사됩니다.

new MyCustomObject(args) 또는 Date 또는 RegExp와 같은 내장 JavaScript 유형을 통해 생성된 개체인 속성은 다시 생성되지 않으며 결과 개체 또는 배열에 단순 개체로 나타납니다.

아래의 간단한 예를 통해 이해해 봅시다.

const firstObj = {
  name: 'John Doe',
  address: {city: 'Banglore', country: 'India'},
  age: 25
};
const secondObj = {
  address: {country: 'United Kingdom'},
  phone: '7878954123'
};
console.log($.extend(true, firstObj, secondObj));
console.log($.extend(false, firstObj, secondObj));

위의 예제에서는 다른 속성을 가진 두 개의 객체를 정의했습니다. 첫 번째 매개변수로 true인 deep 매개변수를 사용하여 extend 메서드를 호출하면, 첫 번째 객체의 속성이 두 번째 객체의 속성으로 재귀적으로 업데이트됩니다.

우리의 경우 두 번째 개체에 의해 국가만 업데이트되고 다른 속성이 추가됩니다.

두 번째 경우, 두 번째 매개변수 false를 사용하여 extend 메소드를 호출하면 첫 번째 객체의 속성이 두 번째 객체의 속성으로 대체됩니다.

유사한 속성이 있으면 첫 번째 개체의 속성이 두 번째 개체의 속성으로 대체됩니다. 그렇지 않으면 두 번째 객체의 새 속성이 생성됩니다.

jQuery를 지원하는 모든 브라우저에서 위의 코드 스니펫을 실행하면 아래 결과가 표시됩니다.

{
  address: {
    city: "Banglore",
    country: "United Kingdom"
  },
  age: 25,
  name: "John Doe",
  phone: "7878954123"
}
{
  address: {
    country: "United Kingdom"
  },
  age: 25,
  name: "John Doe",
  phone: "7878954123"
}

데모