얕은 사본 및 JS 개체의 딥 카피에 대한 자세한 설명

이 기사는 참조를 위해 JavaScript 객체의 얕은 사본 및 딥 카피 코드를 공유합니다. 특정 내용은 다음과 같습니다

1. 라이트 카피

복사는 부모 객체의 모든 속성을 Child Object에 복사하는 것을 의미합니다.

다음 기능은 복사입니다.

 var Chinese = {Nation : 'China'} var doctor = {career : 'doctor'} 함수 ExtendCopy (p) {var c = {}; for (p in p) {c [i] = p [i]; } c.uber = p; 반환 c; }

그것을 사용할 때 다음과 같이 작성하십시오.

 var doctor = extendCopy (중국어); 닥터. // 중국

그러나 그러한 사본에는 문제가 있습니다. 즉, 부모 객체의 속성이 배열 또는 다른 객체와 같으면 실제로 자식 객체는 실제 사본이 아닌 메모리 주소 만 가져옵니다. 따라서 부모 객체가 변조 될 가능성이 있습니다.

이제 값이 배열 인 중국어에 "출생지"속성을 추가하십시오.

중국어 .BirthPlaces = [ '베이징', '상하이', '홍콩'];

extendcopy () 함수를 통해 의사는 중국어를 물려받습니다.

var doctor = ExtendCopy (중국어);

그런 다음 의사의 "생년월일"에 도시를 추가합니다.

doctor.birthplaces.push ( 'Xiamen');

입력 결과를 확인하십시오

Alert (닥터 .birthplaces); // 베이징, 상하이, 홍콩, Xiamen

경고 (중국어 .BirthPlaces); // 베이징, 상하이, 홍콩, Xiamen

결과적으로 두 출생지 모두 변경되었습니다.

따라서 ExtendCopy ()는 기본 유형 데이터를 복사하면이 사본을 "얕은 사본"이라고합니다.

2. 딥 카피

얕고 깊은 사본에는 그러한 단점이 있기 때문에 다음에 딥 카피를 살펴 보겠습니다.

소위 "딥 카피"는 배열과 객체의 실제 사본을 실현할 수 있음을 의미합니다. 구현은 어렵지 않습니다. "얕은 사본"을 재귀 적으로 부릅니다.

 기능 DeepCopy (P, C) {var C = C || {}; for (var i in p) {if (typeof p [i] === 'object') {c [i] = (p [i] .constructor === array)? [] : {}; Deepcopy (P [I], C [I]); } else {c [i] = p [i]; }} 반환 c; }

사용 방법을 살펴보십시오.

var doctor = deepcopy (중국어);

이제 값을 배열로 부모 객체에 속성을 추가하십시오. 그런 다음 자식 대상 에서이 속성을 수정하십시오.

 Chinese.birthPlaces = [ 'Beijing', 'Shanghai', 'Hong Kong']; doctor.birthplaces.push ( 'Xiamen'); Alert (Doctor.birthplaces); // 베이징, 상하이, 홍콩, Xiamen Alert (Chinese.birthplaces); // 베이징, 상하이, 홍콩

이것은 사본을 완성합니다.

$ .extend ()

jQuery의 $ .extend ()는 동일합니다.

$ .Extend ([Deep], Target, Object1 [, Objectn]))

•깊은

유형 : 부울

사실이라면 병합은 재귀가됩니다 (딥 카피라고도 함).

•목표

유형 : 객체

객체 확장. 이것은 새로운 속성을 받게됩니다.

• Object1

유형 : 객체

추가 속성을 포함하는 객체는 첫 번째 매개 변수로 병합됩니다.

• Objectn

유형 : 객체

첫 번째 매개 변수에 병합 할 추가 속성이 포함되어 있습니다

$ .extend ()에 둘 이상의 객체를 제공하면 객체의 모든 속성이 대상 객체 (대상 매개 변수)에 추가됩니다.

$ .extend ()에 하나의 매개 변수 만 제공되면 대상 매개 변수가 생략되었음을 의미합니다. 이 경우 jQuery 객체 자체가 대상 객체에 기본값이 표시됩니다. 이러한 방식으로 jQuery 네임 스페이스 아래에 새로운 기능을 추가 할 수 있습니다. 이것은 jQuery에 새로운 기능을 추가하려는 경우 플러그인 개발자에게 유용합니다.

대상 객체 (첫 번째 매개 변수)는 수정되며 $ .extend ()를 통해 반환됩니다. 그러나 원래 객체를 유지하려면 빈 객체를 대상 객체로 전달할 수 있습니다.

var object = $ .extend ({}, object1, object2);

기본적으로 $ .extend ()를 통한 병합 작업은 재귀가 아닙니다. 첫 번째 객체 자체의 속성이 객체 또는 어레이 인 경우 두 번째 객체의 동일한 키로 속성을 완전히 무시합니다. 이 값은 병합되지 않습니다. 이것은 아래 예제에서 바나나의 가치를 확인함으로써 이해할 수 있습니다. 그러나 True가 함수의 첫 번째 인수로 사용되면 객체에서 재귀 병합이 수행됩니다.

경고 : 첫 번째 매개 변수에 대해 False를 전달하는 것은 지원되지 않습니다.

1. 두 객체를 병합하고 첫 번째 객체를 수정하십시오.

 var object1 = {Apple : 0, Banana : {weight : 52, price : 100}, cherry : 97}; var object2 = {banana : {price : 200}, durian : 100}; // object1 $ .extend (object1, object2); // json.stringify에서 사용할 수 없음 (json.Son.Son.Son.Son.Son.Son.Son.Son.Son.Son.Son.Son.Son.Son.Son.Son.Son.Son.Son.Son.Son.Son.Son.Son.Son.Son.Son.Son.Son.Son.Son.Son.Son.Son. ); // { "Apple": 0, "Banana": { "price": 200}, "Cherry": 97, "Durian": 100}

2. 두 개의 객체를 재귀적인 방식으로 병합하고 첫 번째 객체를 수정하십시오.

 var object1 = {Apple : 0, Banana : {weight : 52, price : 100}, cherry : 97}; var object2 = {banana : {price : 200}, durian : 100}; // object2를 Object1로 menge니다. json.stringify (object1)); // { "Apple": 0, "Banana": { "weight": 52, "price": 200}, "Cherry": 97, "Durian": 100}

3. 기본값 및 옵션 객체를 병합하고 기본값 객체를 수정하지 마십시오. 이것은 일반적으로 사용되는 플러그인 개발 모델입니다.

 var defaults = {validate : false, limit : 5, name : "foo"}; var 옵션 = {validate : true, name : "bar"}; // defaultsvar settings = $ .extend ({}, defaults, 옵션); console.log (json.stringify (defaults)); )); console.log (json.stringify (settings)); // defaults- { "validate": false, "limit": 5, "name": "foo"} // 옵션 - { "validate": "name": "bar"} // 설정 - { "validate": true ": 5,"}}

JavaScript는 객체가 동일한지 여부를 결정합니다

JavaScript에서 평등 작업에는 "==", "==="일관성이 포함됩니다. 둘 사이의 차이의 대부분이있을 필요는 없습니다. 이 기사에서는 두 객체가 동등한 지 여부를 결정하는 방법에 대해 이야기 할 것입니다. 두 객체의 속성이 동일한 속성을 가지고 있고 그 속성이 동일한 값을 갖는 경우 두 객체는 동일하다고 생각할 수 있습니다. 그런 다음 예제를 사용하여 다음을 보여 봅시다.

 var obj1 = {이름 : "벤자민", 섹스 : "male"} var obj2 = {이름 : "벤자민", 섹스 : "male"} // 출력 : false secondso.log (obj1 == obj2); // 출력 : false secondso.log (obj1 =======

위의 예에서 "=="또는 "=="를 사용하든 거짓이 반환되는지 알 수 있습니다. 주된 이유는 기본 유형 문자열과 숫자가 값으로 비교되기 때문입니다. 객체 (날짜, 배열) 및 일반 객체는 포인터로 가리키는 메모리의 주소로 비교되기 때문입니다. 다음 예를 참조하십시오.

 var obj1 = {이름 : "벤자민", 섹스 : "male"}; var obj2 = {이름 : "벤자민", 섹스 : "male"}; var obj3 = obj1; // 출력 : trueconsole.log (obj1 == obj3); // 출력 : trueconsole.log (obj1 =/outputss : // uteconsole.log); falseconsole.log (obj2 === obj3); // 출력 : falseconsole.log (obj2 === obj3);

위의 예는 OBJ1과 OB3의 포인터가 메모리의 동일한 주소를 가리키기 때문에 true를 반환합니다. 객체 지향 언어 (Java/C ++)로 통과하는 가치 통과 및 기준의 개념과 유사합니다. 두 객체가 동일한지 여부를 결정하려면 명확해야합니다. 두 객체의 속성이 동일인지 또는 속성에 해당하는 값이 동일인지 또는 무엇입니까?

 기능인 (이름) {this.name = 이름; } var p1 = 새로운 사람 ( "p1"); var p2 = 새로운 사람 ( "p2"); Console.log (P1 == P2); // false person.prototype.sayhi = function () {// sayhi를 여기에서 do} console.log (p1.sayhi () == p2.sayhi ()); // true console.log (p1.sayhi () == p2.sayhi ()); // true console.log (p1.sayhi () === p2.sayhi ()); //진실

위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.