jQuery.extend() 구현_자바스크립트 기술에 대한 자세한 설명과 예시

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

<script><BR>obj1 = { a : 'a', b : 'b' };<BR>obj2 = { x : { xxx : 'xxx', yyy : 'yyy' }, y : 'y' }; <P>$.extend(true, obj1, obj2); <P>alert(obj1.x.xxx); // "xxx" 가져오기 <P>obj2.x.xxx = 'zzz';<BR>alert(obj2.x.xxx); // "zzz" 가져오기<BR>alert(obj1.x.xxx); // "xxx"를 가져와야 함 <BR></script>

$.extend(true, obj1, obj2)는 ​​obj2의 속성으로 객체 obj1을 확장한다는 의미입니다. 첫 번째 매개변수는 전체 복사를 의미하기 위해 true로 설정됩니다.
obj1에는 원래 "x" 속성이 없었지만 확장 후 obj1에는 "x" 속성이 있을 뿐만 아니라 obj2의 "x" 속성을 수정해도 obj1의 "x" 속성에 영향을 주지 않습니다. 가치, 이것이 소위 "딥 카피(deep copy)"입니다.

얕은 복사 구현

얕은 복사만 구현해야 하는 경우 다음과 같은 방법을 사용할 수 있습니다.

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

$ = {
확장 : function(target, options) {
for (옵션의 이름) {
target[name] = options[name];
}
return target;
}
};

즉, 옵션의 속성을 대상에 복사하면 됩니다. 유사한 코드로 계속 테스트할 수 있지만 다른 결과를 얻을 수 있습니다(js 이름이 "jquery-extend.js"라고 가정).

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

<script>obj1 = { a : 'a', b : 'b' };<BR>obj2 = { x : { xxx : 'xxx', yyy : 'yyy' }, y : 'y' };<BR>$.extend(obj1, obj2);<BR>alert(obj1.x.xxx); // "xxx" 가져오기<BR>obj2.x.xxx = 'zzz';<BR>alert( obj2.x .xxx); // "zzz" 가져오기<BR>alert(obj1.x.xxx); // "zzz" 가져오기<BR></script>

obj1에는 "x " 속성이지만 이 속성은 개체입니다. obj2의 "x"를 수정하면 obj1에도 영향을 미치므로 찾기 어려운 오류가 발생할 수 있습니다.

딥카피 구현

"깊은 복사"를 구현하려면 복사된 객체가 배열 또는 객체인 경우 재귀적으로 확장을 호출해야 합니다. 다음 코드는 "깊은 복사"의 간단한 구현입니다.

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

$ = {
extend : function(deep, target, options) {
for (옵션의 이름) {
copy = options[name];
if (deep && copy instanceof 배열) {
                 대상[이름] = $.extend(deep, [], copy);
                                                                            );
} else {
대상[이름] = 옵션[이름];
}
}
return target;
}
};

세 가지 상황으로 구분됩니다.
1. 속성이 배열인 경우 대상을 초기화합니다. [name]을 빈 배열로 변환한 다음
2. 속성이 객체인 경우 target[ name]을 빈 객체로 초기화한 다음
3을 반복적으로 호출합니다. , 속성을 직접 복사합니다.
테스트 코드는 다음과 같습니다.

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

<script><BR>obj1 = { a : 'a', b : 'b ' };<BR> obj2 = { x : { xxx : 'xxx', yyy : 'yyy' }, y : 'y' };<BR>$.extend(true, obj1, obj2);<BR>alert (obj1.x.xxx ); // "xxx" 가져오기<BR>obj2.x.xxx = 'zzz';<BR>alert(obj2.x.xxx); // "zzz" 가져오기<BR>alert( obj1.x.xxx) ; // "xxx" 가져오기<BR></script>


이제 전체 복사가 지정되면 obj2 수정은 obj1에 영향을 미치지 않습니다. 그러나 이 코드에는 IE5에서 "instanceof Array"가 호환되지 않는 등의 몇 가지 문제가 여전히 있습니다. jQuery의 구현은 실제로 좀 더 복잡합니다.

더 완벽해진 구현

다음 구현은 jQuery의 확장()에 더 가깝습니다.

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

$ = function() {
    var copyIsArray,
        toString = Object.prototype.toString,
        hasOwn = Object.prototype.hasOwnProperty;

    class2type = {
        '[객체 부울]' : '부울',
        '[객체 번호]' : '번호',
        '[객체 문자열]' : '문자열',
        '[객체 함수]' : '함수',
        '[객체 배열]' : '배열',
        '[객체 날짜]' : '날짜',
        '[객체 RegExp]' : 'regExp',
        '[객체 객체]' : '객체'
    },

    type = function(obj) {
        return obj == null ? 문자열(obj) : class2type[toString.call(obj)] || "객체";
    },

    isWindow = function(obj) {
        return obj && typeof obj === "object" && "setInterval" in obj;
    },

    isArray = Array.isArray || function(obj) {
        반환 유형(obj) === "배열";
    },

    isPlainObject = function(obj) {
        if (!obj || type(obj) !== "object" || obj.nodeType || isWindow(obj)) {
            return false;
        }

        if (obj.constructor && !hasOwn.call(obj, "constructor")
               && !hasOwn.call(obj.constructor.prototype, "isPrototypeOf")) {
            return false;
}

        var key;
        for (obj의 키) {
        }

        반환 키 === 정의되지 않음 || hasOwn.call(obj, key);
    },

    확장 = 기능(깊은, 대상, 옵션) {
        for (옵션의 이름) {
            src = 대상[이름];
            copy = 옵션[이름];

            if (대상 === 복사) { 계속; }

            if (deep && copy
                   && (isPlainObject(copy) || (copyIsArray = isArray(copy)))) {
              if (copyIsArray) {                    copyIsArray = false;
                    복제 = src && isArray(src) ? 소스 : [];

               } else {

                   clone = src && isPlainObject(src) ? src : {};
                }
>     }

        반품 대상;
    };

    return { 연장: 연장 };
}();

首先是 $ =  function(){...}();这种写법,可以리解为与하면 적법한 类似：

复代代码

代码如下:func = function(){.. .};$ =  func();
즉, 함수를 즉시 실행하고 그 결과를 $에 할당합니다. 이러한 작성 방법은 함수를 사용하여 범위를 관리하고 지역 변수나 지역 함수가 전역 범위에 영향을 미치는 것을 방지할 수 있습니다. 또한, 우리는 사용자가 $.extend()를 호출하고 내부적으로 구현된 함수만 숨기기를 원하므로 최종 반환된 객체에는 확장만 포함됩니다:

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

return {extend:extend };

다음으로, 확장 함수와 확장 함수의 차이점을 살펴보겠습니다. 이전 것 먼저 추가 문장이 있습니다:

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

if (target == = copy) { continue; }

복사할 속성 복사본이 대상과 동일한 경우, 즉 "self"를 복사하는 것을 방지하기 위한 것입니다. "자신의 속성"을 사용하면 예상되는 주기가 실패할 수 있습니다.

그 다음 객체가 배열인지 확인하는 방법:

코드를 복사하세요 코드는 다음과 같습니다.

type = function(obj) {
return obj == null ? String(obj) : class2type[toString.call(obj)] || "object";
},
isArray = Array.isArray || function(obj) {
          return type(obj) === "array";
    }

브라우저에 배열이 내장된 경우 .isArray 구현, 브라우저 자체 구현을 사용합니다. 그렇지 않으면 객체가 "[객체 배열]"인지 확인하기 위해 문자열로 변환됩니다.

마지막으로 isPlainObject의 구현을 문장별로 살펴보겠습니다.

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

if (!obj || type(obj) !== "object" || obj.nodeType || isWindow(obj)) {
return false;
}

obj.nodeType이 정의된 경우 이는 DOM 요소임을 나타냅니다. 이 코드는 다음 네 가지 상황에서 전체 복사가 수행되지 않음을 나타냅니다.
1 개체가 정의되지 않았습니다. 2. 문자열로 변환하면 "[object Object]" "가 아닙니다.
3. obj는 DOM 요소이고
4. obj는 window입니다.
DOM 요소와 창이 딥 카피되지 않는 이유는 특히 창 개체에 대해 너무 많은 속성이 포함되어 있기 때문일 수 있습니다. 내장 속성은 말할 것도 없고 전역 도메인에 선언된 모든 변수가 해당 속성이 됩니다.
다음은 생성자 관련 테스트입니다.

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

if (obj.constructor && !hasOwn.call(obj, "생성자")
                                                                                                               🎜>

객체에 생성자가 있지만 자체 속성이 아닌 경우 이는 다음을 의미합니다. 생성자는 프로토타입을 통해 상속됩니다. 이 경우 깊은 복사가 수행되지 않습니다. 이는 다음 코드를 조합하여 이해할 수 있습니다.

코드 복사

코드는 다음과 같습니다. var key; for (key in obj) {

}

return key === 정의되지 않음 || hasOwn.call(obj, key);


이 코드는 다음과 같습니다. 개체의 속성을 순회할 때 자체 속성에서 시작하므로 마지막 속성이 자체 속성인지 여부만 확인하면 되기 때문에 개체의 속성이 모두 자체 속성인지 확인하는 데 사용됩니다.
이는 객체가 프로토타입을 통해 생성자 또는 속성을 상속하는 경우 객체가 깊게 복사되지 않음을 의미합니다. 이는 불확실한 요소가 도입되거나 많은 수의 복사를 방지하기 위해 해당 객체가 복잡할 수도 있다는 점을 고려할 수도 있습니다. 시간이 많이 걸리는 처리는 "PlainObject"만 딥카피를 수행한다는 것을 함수명에서 알 수 있습니다.
다음 코드를 사용하여 테스트하는 경우:

코드 복사

코드는 다음과 같습니다.

<script><BR>함수 O() {<BR> this.yyy = 'yyy';<BR>} <P>함수 X() {<BR> this.xxx = 'xxx';<BR>} <P>X.prototype = new O(); <P>x = 새로운 X(); <P>obj1 = { a : 'a', b : 'b' };<BR>obj2 = { x : x };<BR>$.extend(true, obj1, obj2); <P>alert(obj1.x.yyy); // "xxx" 가져오기<BR>obj2.x.yyy = 'zzz';<BR>alert(obj1.x.yyy); // "zzz" 가져오기<BR></script>

보시다시피 이 경우에는 Deep Copy가 수행되지 않습니다.
요컨대, jQuery에서 확장() 구현은 브라우저와의 호환성, 낮은 성능 방지, 예측할 수 없는 오류 발생 방지 등의 요소를 고려합니다.