자바스크립트 얕은 복사와 깊은 복사의 차이점

얕은 복사와 깊은 복사가 무엇인지 이해하기 전에 먼저 JavaScript의 값 유형과 참조 유형의 저장 특성을 이해해야 합니다.

1. 값 유형은 두 가지 유형으로 나뉩니다.
기본 데이터 유형: 문자열, 숫자, boolearn, 정의되지 않음, null
복합 데이터 유형: Array, Object, Function, Date, RegExp...

`2. `` 2.1 기본 데이터형 할당 예시

   var num = 123;
   var num2 = num;

"

* 값형 할당의 저장 특성은 변수에 있는 데이터를 모두 복사하여 새 변수에 저장합니다.
* `var num = 123`은 저장된 숫자를 나타냅니다. 변수에 123입니다.
* 그러면 데이터를 복사합니다. 즉, 123을 복사합니다. 그러면 메모리에 2개의 데이터가 있습니다
* 복사한 데이터를 `num2`에 할당합니다. num2의 변수 값이 변경되어도 영향을 미치지 않습니다. num의 변수값
* 메모리에 **데이터 복사본이 2개** 있는 것이 특징입니다.


"2.2 복합 데이터형 할당 예시

var o = { name: '张三' };
var obj = o;

"

* 할당은 변수에 저장된 데이터를 복사하는 것입니다. o, 그런 다음 데이터를 복사합니다. Data는 obj에 할당됩니다
* 특징은 메모리에 데이터의 복사본이 하나만 있고 객체 o와 객체 obj의 name 속성 값이 동일한 주소를 가리킵니다
* 문제: 객체 obj의 이름 속성을 수정하면 원래 객체 o의 이름에 영향을 미칩니다.

그럼 문제는 복합 데이터 유형이 자신의 객체에 영향을 주지 않고 어떻게 다른 객체에 값을 할당할 수 있느냐는 것입니다.
아래에서 제가 이해한 내용을 설명하겠습니다. Deep Copy와 Shallow Copy:

# Deep Copy와 Shallow Copy

1. Deep Copy란 무엇인가요?

Shallow Copy는 무엇인가요? 현재 객체의 속성만 복사하고, 현재 객체의 속성이 다음과 같은 경우에만 해당 유형을 참조할 때 고려하지 않습니다.                                                                                          복사
하나의 복사본, 데이터는 메모리에서 독립적입니다.

​​​ * 속성이 변경되면 복사된 객체 속성에 영향을 미치지 않습니다.


2. Deep Copy 코드 캡슐화 구현

var deepCopy = function () {
   // 1, 创建一个对象
   var temp = {};
   // 2, 拷贝属性, 判断如果是引用类型需要深拷贝
   for ( var k in this ) {
      if ( typeof this[ k ] === 'object' ) {
         temp[ k ] = this[ k ].deepCopy();
      } else {
         temp[ k ] = this[ k ];
      }
      // temp[ k ] = this[ k ];
   }
   // 3, 返回对象
   return temp;
};

테스트 예시:

var car = { name: '法拉利' };
var p = { name: '张三', age: 19, gender: '男', car: car };
//给对象car和对象p动态添加 拷贝的 方法
car.deepCopy = deepCopy;
p.deepCopy = deepCopy;
//重新定义一个newP对象，将对象p中的所有属性与方法都赋值给newP。
var newP = p.deepCopy();
//这个时候修改对象p中的属性方法对应的值时，如果在没有调用封装的深拷贝的函数时，newP的值也会相应改变。
//调用了深拷贝的函数之后，即使对象p中的值改变，也不会影响newP中值。
p.name = '李四';
p.age = 20;
p.gender = '女';
p.car.name = '兰博基尼';

위는 Deep Copy 구현 방법입니다.

.

위 내용은 자바스크립트 얕은 복사와 깊은 복사의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!