>  기사  >  웹 프론트엔드  >  JavaScript 객체의 확장은 일반적으로 사용되는 function_javascript 기술입니다.

JavaScript 객체의 확장은 일반적으로 사용되는 function_javascript 기술입니다.

WBOY
WBOY원래의
2016-05-16 18:40:371010검색

일반적으로 매개변수 객체의 기본값은 함수에 제공됩니다. 이때 다음과 같이 확장을 통해 들어오는 매개변수를 기본 매개변수에 덮어써야 합니다.
코드:

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

giant.ui.imageshow = function(options) {
this.opts = $ .extend({}, Giant .ui.imageshow.defaults, options)
}
giant.ui.imageshow.defaults = {
id:"imageshow",
isAuto:true,
speed:3000
};

Jquery 프레임워크는 확장 도구를 제공합니다:
jQuery.extend(target,obj1,[objN])
객체 확장 이상의 다른 객체 Object는 확장된 객체를 반환합니다.
상속을 단순화하는 데 사용됩니다.
하나의 객체를 하나 이상의 다른 객체로 확장하여 원래의 수정된 객체를 반환합니다.
이것은 간단한 상속을 위한 훌륭한 유틸리티입니다.
반환 값--객체
매개변수
대상(객체 ): 수정할 개체입니다.
object1(Object): 첫 번째 객체에 병합할 객체입니다.
objectN(객체): (선택 사항) 첫 번째 객체에 병합할 객체입니다.
그러나 프레임워크에 내장된 확장에는 명백한 결함이 있습니다. 즉, 객체에서 객체를 상속할 수 없다는 것입니다. 설명을 위해 예를 들어 보겠습니다.
코드:
코드 복사 코드는 다음과 같습니다.

var obj1 = {},
var obj2={name:"karry",email:"karry@a.com",tel:{homeTel:"158255",officeTel:"02112585"}}
obj1 = $.extend({},obj1,obj2);

결과적으로 obj1에는 이름과 이메일 속성만 있고 tel 자체는 객체이고 tel의 homeTel과 officeTel은 속성입니다. 상속되지 않았습니다.
내 목표는 하위 개체가 아무리 깊게 중첩되어 있어도 하위 개체의 하위 속성을 복사(상속)하는 기능을 구현하는 것입니다.
먼저 이 메소드의 매개변수를 살펴보겠습니다. 대상 대상 객체, 소스 소스 객체, 객체의 객체를 복사(상속)할지 여부의 세 가지 매개 변수가 있습니다. 모두 상속합니다. false인 경우 jquery 구현과 동일합니다. 마찬가지로 하위 개체는 상속되지 않습니다.
코드:
코드 복사 코드는 다음과 같습니다.

Object.extend = function(target , /*선택적*/source, /*선택적*/deep) {}

첫 번째 매개변수인 target만 필수 매개변수로 설정했고, source와 deep은 모두 선택 매개변수입니다. . 이렇게 하면 문제가 발생합니다. 사용 시 두 개의 매개변수만 전달되는 경우 두 번째 매개변수가 해당 소스인지 딥인지 확인하는 방법은 무엇입니까? 그러면 전달된 두 번째 매개변수의 유형을 확인해야 합니다.
코드:
코드 복사 코드는 다음과 같습니다.

target = target | | {} ; //기본적으로 대상은 비어 있습니다.
var sType = typeof source;
//두 번째 매개변수의 유형이 정의되지 않았거나 부울 값인 경우
if( sType === 'undefine' || sType === 'boolean' ) {
deep = sType === 'boolean' ? source : false;
source = target; //대상을 소스에 할당합니다. /여기는 객체를 가리킵니다
}

누군가 코드의 마지막 두 줄에 대해 질문이 있을 수 있습니다. 이것이 제가 처리하는 방법입니다. 매개 변수 target과 source가 모두 존재하고 source가 부울 값이 아닌 경우 소스 개체의 내용이 대상에 복사됩니다. 그렇지 않으면 대상 개체가 Object 개체에 복사됩니다. deep의 기본값은 false입니다.
안전상의 이유로 소스가 위 조건을 충족하지만 Object 객체가 아니거나 Function 객체인 경우(다른 문제가 있음) 판단도 필요합니다. 또한 복사할 방법도 없습니다. 이때 소스를 빈 Object로 설정합니다. 즉, 복사 작업이 수행되지 않습니다.
코드:

코드 복사 코드는 다음과 같습니다.
if( typeof source !== 'object' && Object.prototype.toString.call(source) !== '[object Function]' )
source = {};

참고: Function 객체가 유형 작업을 수행하면 "object"도 반환되지만 올바르게 복사할 수 없으므로(적어도 내 방법에서는 아님) 이를 제거해야 합니다.
다음은 복사할 루프입니다. 여기서는 재귀가 사용됩니다.
코드:

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

var i=1,option;
// 외부 루프는 옵션을 순서대로 수정하고 먼저 대상으로 설정한 다음 소스로 설정합니다
while(i <= 2) {
options = i === 1 ? target : source;
if( options != null ) {
//내부 루프는 해당 속성을 복사합니다
for( options var name )
var src = target[name], copy = options[name];
if(target === copy)
continue;
//deep이 true로 설정되고 속성이 객체
if(deep && copy && typeof copy === 'object' && !copy.nodeType)
//Recursion
target[name] = this.extend(src ||(copy.length != null ? [] : {}), 복사, 깊이);
else if(copy !== 정의되지 않음)
target[name] = 복사
}
i ;
}

여기서는 객체의 객체를 순서대로 복사하는 재귀적 방법을 사용합니다. 이 기능이 완료되었습니다. 전체 코드는 다음과 같습니다.
코드:

코드 복사 코드는 다음과 같습니다.
/*
* @param {Object} 대상 대상 개체입니다.
* @param {Object} 소스 소스 개체입니다.
* @param {boolean} deep 객체에 객체를 복사(상속)할지 여부입니다.
* @returns {Object} 소스 개체의 속성을 상속하는 새 개체를 반환합니다.
*/
Object.extend = function(target, /*선택적*/source, /*선택적*/deep) {
target = target || {}
var sType = 소스 유형 , i = 1, 옵션;
if( sType === '정의되지 않음' || sType === 'boolean' ) {
deep = sType === 'boolean' ? 소스: false; source = target;
target = this;
}
if( typeof source !== 'object' && Object.prototype.toString.call(source) !== '[object Function]' )
source = {};
while(i <= 2) {
options = i === 1 ? target :
if( options != null ) {
for( var name in options ) {
var src = target[name], copy = options[name]
if(target === copy)
continue; if(deep && copy && typeof copy === 'object' && !copy.nodeType)
target[name] = this.extend(src ||
(copy.length != null ? [] : {}), copy, deep) ;
else if(copy !== undefine)
target[name] = copy;
}
}
i
}
return target; ;


사용 예:
코드:



코드 복사
코드는 다음과 같습니다. var source = {id:1, name:'Jack Source'}, target = {name:'Jack Target', 성별:1,tel:{homeTel:"158255",officeTel: "02112585" }}; var newObj1 = Object.extend(대상, 소스)
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.