jQuery_jquery의 extend() 및 fn.extend() 메소드에 대한 자세한 설명

이 두 가지 방법은 동일한 코드를 사용합니다. 하나는 jQuery 개체 또는 일반 개체의 속성과 메서드를 병합하는 데 사용됩니다. 다른 하나는 jQuery 개체의 인스턴스에 사용됩니다.

html 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

~ ~                                                     머리>


본문>

아래에 js의 사용법을 작성하세요.

두 개의 일반 개체 병합

코드 복사 코드는 다음과 같습니다.

//두 개의 일반 객체에 대한 속성 병합
var obj1={이름:'톰',나이:22};
var obj2={이름:'잭', 높이:180};
console.log($.extend(obj1,obj2)); //객체 {이름: "Jack", 나이: 22, 키: 180}

jQuery 객체에 속성 또는 메소드 추가

코드 복사 코드는 다음과 같습니다.

$.extend({hehe:function(){alert('hehe');}});
$.hehe(); //경고('hehe')

이 사용법은 jQuery 내부에 프로토타입 속성 및 메소드뿐만 아니라 인스턴스 속성 및 메소드를 추가하는 구현 방법이기도 합니다. 다음은 확장을 사용하는 것입니다. 자체 메서드와 속성을 확장하기 위한 jQuery 1.7.1의 메서드

코드 복사 코드는 다음과 같습니다.

jQuery.extend({
noCon conflict: 함수(깊은) {
            if ( window.$ === jQuery ) {
               창.$ = _$;
}
If ( deep && window.jQuery === jQuery ) {
               window.jQuery = _jQuery;
}
         jQuery를 반환합니다.
},
// DOM을 사용할 준비가 되었나요? 발생하면 true로 설정하세요.
isReady: 거짓,
// 이전에 얼마나 많은 항목을 기다려야 하는지 추적하는 카운터
// 준비 이벤트가 발생합니다. #6781
을 참조하세요. 준비대기: 1,
.....

이 예시에서는 개체 매개변수가 하나만 전달되므로 기본적으로 병합 및 수정 대상 개체로 간주됩니다

jQuery 객체 인스턴스에 속성 또는 메서드 추가

코드 복사 코드는 다음과 같습니다.

//jQuery 인스턴스에 대한 확장된 병합
console.log($('img').extend({'title':'img'}));//[img, img#img.img, prevObject: jQuery.fn.jQuery.init[1], context : 문서, 선택기: "img", 제목: "img", 생성자: 함수…]

병합할 개체만 병합하고 수정하지 마세요

코드 복사 코드는 다음과 같습니다.

var obj1={이름:'톰',나이:22};
var obj2={이름:'잭', 높이:180};
console.log($.extend(obj1,obj2)); //객체 {이름: "Jack", 나이: 22, 키: 180}
console.log(obj1); //객체 {이름: "Jack", 나이: 22, 키: 180}

기본적으로 병합할 개체는 반환된 결과처럼 수정됩니다. 병합된 개체만 가져오고 싶지만 원본 개체를 삭제하고 싶지 않은 경우 이 방법을 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var obj1={이름:'톰',나이:22};
var obj2={이름:'잭', 높이:180};
var 비어 있음={};
console.log($.extend(empty,obj1,obj2)); //객체 {이름: "Jack", 나이: 22, 키: 180}
console.log(obj1); //객체 {이름: "Tom", 나이: 22}

사용하는 경우 재귀 병합 또는 전체 복사

코드 복사 코드는 다음과 같습니다.

var obj1={이름:'톰',love:{drink:'milk',eat:'bread'}};
var obj2={이름:'Jack',love:{drink:'water',sport:'football'}};
console.log(($.extend(false,obj1,obj2)).love); //Object {drink: "water", sport: "football"}
console.log(($.extend(true,obj1,obj2)).love); //Object {drink: "water", eat: "bread", sport: "football"}

자세한 사용법은 참고 매뉴얼을 확인해주세요http://www.w3cschool.cc/manual/jquery/

1.7.1 소스코드에서 어떻게 구현되었는지 분석해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

jQuery.extend = jQuery.fn.extend = function() {
var 옵션, 이름, src, 복사, copyIsArray, 복제,
대상 = 인수[0] || {},
나는 = 1,
길이 = 인수.길이,
깊은 = 거짓;
...
}

먼저 변수 세트를 정의합니다. 매개변수 개수가 불확실하므로 전달된 매개변수에 액세스하기 위해 인수 객체를 직접 호출합니다.

변수 옵션: 소스 개체를 가리킵니다.
변수 이름: 소스 객체의 속성 이름을 나타냅니다.
Variable src: 대상 객체의 속성의 원래 값을 나타냅니다.
변수 복사: 소스 객체의 속성 값을 나타냅니다.
변수 copyIsArray: 변수 복사본이 배열인지 여부를 나타냅니다.
변수 클론: ​​딥 카피 중 원본 값의 수정 값을 나타냅니다.
가변 대상: 대상 개체를 가리킵니다.
변수 i: 소스 객체의 시작 인덱스를 나타냅니다.
변수 길이: 매개 변수의 개수를 나타내며 변수 대상을 수정하는 데 사용됩니다.
변수 deep: 깊은 복사를 수행할지 여부를 나타내며 기본값은 false입니다.

코드 구현을 더 잘 이해하기 위해 소스 코드 실행을 관찰하는 시연으로 위에 제시된 예를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

var obj1={이름:'톰',love:{drink:'milk',eat:'bread'}};
var obj2={이름:'Jack',love:{drink:'water',sport:'football'}};
$.extend(true,obj1,obj2)

소스코드 분석

코드 복사 코드는 다음과 같습니다.

// 딥 카피 상황 처리
If ( typeof target === "boolean" ) {
깊은 = 목표;
대상 = 인수[1] || {};
// 부울과 대상을 건너뜁니다
나는 = 2;
}

첫 번째 매개변수가 Boolean 값이면 deep copy인지 판단하고, 두 번째 매개변수가 존재하지 않으면 두 번째 매개변수를 대상 객체로 사용합니다. 빈 객체에 할당하고, 소스 객체의 첨자를 2로 변경합니다. 이 예에서는 첫 번째 매개변수가 true이고 그 다음 deep이 두 번째 매개변수로 변경되므로 여기서 수행됩니다. 소스 객체의 시작 첨자는 2입니다. 이는 소스 객체로서 세 번째 객체(이 예에서는 obj2

)부터 시작함을 의미합니다.

코드 복사 코드는 다음과 같습니다.

// 대상이 문자열 등인 경우 처리(딥 카피에서 가능)
If ( typeof target !== "object" && !jQuery.isFunction(target) ) {
대상 = {};
}

여기에서 대상이 추가로 처리됩니다. 객체 및 함수 데이터 유형이 아닌 경우에는 사용자 정의 속성을 추가할 수 없습니다. 예를 들어 문자열은 자체 메서드와 속성을 호출할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

// 하나의 인수만 전달되면 jQuery 자체를 확장합니다
If ( 길이 === i ) {
대상=이것;
​​​​—나;
}

길이 속성이 i 값과 같다면 대상 개체가 없다는 뜻입니다. 일반적인 상황에서는 길이가 i 값보다 커야 합니다. 그러면 이때 이를 대상 개체로 사용하여 줄입니다. i 값보다 큰 길이 값을 얻으려면 i 값을 1만큼 늘립니다. (1이 i보다 큼)

대상 객체가 전달되지 않는 한 속성을 자신에게 확장하는 jQuery 방식의 구현 원칙입니다.

두 가지 가능한 상황: $.extend(obj) 또는 $.extend(false/true,obj);

코드 복사 코드는 다음과 같습니다.

    for ( ; i         // null이 아니거나 정의되지 않은 값만 처리합니다
        if ( (옵션 = 인수[ i ]) != null ) {
            // 기본 객체 확장
            for ( 옵션의 이름 ) {
                src = 대상[ 이름 ];
                복사 = 옵션[ 이름 ];
                //끝나지 않는 루프 방지
                if ( 대상 === 복사 ) {
                    계속;
                }
                // 일반 객체나 배열을 병합하는 경우 반복
                if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
                    if ( copyIsArray ) {
                        copyIsArray = false;
                        clone = src && jQuery.isArray(src) ? 소스 : [];
                    } 그 밖의 {
                        clone = src && jQuery.isPlainObject(src) ? 소스 : {};
                    }
                    // 원본 개체를 이동하지 말고 복제하세요
                    target[ 이름 ] = jQuery.extend( deep, clone, copy );
                // 정의되지 않은 값을 가져오지 마세요
                } else if ( 복사 !== 정의되지 않음 ) {
                    대상[ 이름 ] = 복사;
                }
            }
        }
    }

부동산 방식의 核心了, 从인론이 第i个下标值开始循环操작성으로 만들어졌습니다.可以看到其实

源对象불일정적인 이미지, 也可以是其他类型的值比如字符串比如这样写：

复主代码 代码如下:

console.log($.extend({'name':'tom'},'aa'));   //객체 {0: "a", 1: "a", 이름: "tom"}

是不是感觉很奇怪啊?究竟是怎么实现的呢?下面接着看

过滤完에서 循环 src를 위한 src를 위한 是目标对象的某个键的值, copy属性保存的源对象的源对象的值，这个键tour是一样의

复主代码 代码如下:

//끝나지 않는 루프 방지
If ( 대상 === 복사 ) {
                        계속;
                }

소스 개체의 특정 속성 값이 대상 개체인 경우 무한 루프가 발생하여 프로그램이 중단될 수 있으므로 여기서는 이 루프를 건너뛸 수 있도록 제한합니다.

코드 복사 코드는 다음과 같습니다.

var o = {};
o.n1 = o;
$.extend( true, o, { n2: o } );
// 예외 발생:
// 잡히지 않은 RangeError: 최대 호출 스택 크기가 초과되었습니다

그러나 그렇게 하면 다음과 같은 일부 정상적인 상황에 부당한 영향을 미칠 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

var obj1={a:'a'}
var obj2={a:obj1};
console.log($.extend(obj1,obj2)); //객체 {a: "a"}

이 상황도 소스 객체 값이 대상 객체와 동일한 것을 만족하지만, continue를 실행했기 때문에 obj1의 a 속성 값이 수정되지 않은 것으로 나타났습니다. 아래 소스에서 이 단락을 주석 처리하세요. 실행 전 코드

코드 복사 코드는 다음과 같습니다.

객체{a: 객체}

이번에는 정상적으로 수정이 되었습니다. 개인적으로 이 부분은 개선이 필요하다고 생각합니다.

그리고 딥카피인지 구별하는 if 판단이 있습니다. 먼저 딥카피를 보지 말고 일반을 먼저 살펴보세요

코드 복사 코드는 다음과 같습니다.

대상[ 이름 ] = 복사;

복사본에 값이 있으면 대상 개체에 직접 복사되는 방식으로 병합이 이루어집니다.

for 루프 이후에는 새로운 대상 객체가 반환되므로 최종적으로 대상 객체가 수정되며 결과는 반환된 결과와 동일합니다.

코드 복사 코드는 다음과 같습니다.

// 수정된 객체를 반환합니다
복귀대상;
};

딥 카피 처리 방법에 대해 이야기해 보겠습니다

먼저 deep이 true인지, copy에 값이 있고 객체 또는 배열인지 확인한 다음(객체나 배열이 아닌 경우 심층 복사가 불가능함) 배열과 객체에 의해 처리되는지 살펴보겠습니다. 먼저 배열에서:

코드 복사 코드는 다음과 같습니다.

if ( copyIsArray ) {
          copyIsArray = false;
​ ​ clone = src && jQuery.isArray(src) ? src : [];

} 그 외 {
​​​​clone = src && jQuery.isPlainObject(src) ? src: {};
}

copyIsArray 배열의 값이 true이면 내부로 들어가서 값을 false로 변경합니다. 현재 루프의 소스 ​​객체 속성에 대해 대상 객체가 있을 수도 있고 없을 수도 있습니다. 그렇다면 배열이 변경되지 않은 경우 원본 객체의 현재 속성이 배열이므로 마지막 대상 요소도 배열이어야 하기 때문에 배열이 되도록 둡니다. 배열 또는 개체입니다. 대상 개체의 현재 속성을 개체로 변경합니다.

코드 복사 코드는 다음과 같습니다.

// 원본 개체를 이동하지 말고 복제하세요
대상[ 이름 ] = jQuery.extend( deep, clone, copy );

그런 다음 소스 객체(배열 또는 객체)의 현재 속성 값과 수정된 대상 객체의 현재 속성을 재귀적으로 병합하고 반환된 새 배열 또는 객체를 대상 객체에 할당하여 궁극적으로 깊은 복사를 달성합니다.

그러나 여기에는 다음과 같은 다소 이상한 현상이 있습니다.

코드 복사 코드는 다음과 같습니다.

console.log($.extend({a:1},'aa')); //객체 {0: "a", 1: "a", a: 1}

원래 소스 객체가 반드시 객체 e일 필요는 없으며 문자열은 대상 객체와 분할 및 병합될 수 있습니다. for...in 루프는 문자열에서 작동하는 것으로 나타났습니다

코드 복사 코드는 다음과 같습니다.

var str='aa';
for(str의 var 이름){
console.log(이름);
console.log(str[이름])
}

이것도 가능합니다. 문자열을 분할하여 숫자 아래 첨자에 따라 읽습니다. 단, 소스 코드에서는

코드 복사 코드는 다음과 같습니다.

if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) )

은 배열과 객체로 제한되는데, 딥 카피 중에는 아무런 효과가 없나요?

테스트해본 결과 소스코드에 복사된 값이 익명함수로 바뀌어서 딥카피도 가능해졌습니다

경고(jQuery.isPlainObject(복사)) //true

왜 함수인지는 아직 파악하지 못했고 나중에 해결하도록 남겨두겠습니다!