자바스크립트 딥카피(deepClone)에 대한 자세한 설명

Javascript deep copy는 초보자는 물론 숙련된 개발자라도 자주 접하고 JavaScript deep copy를 잘 이해하지 못하는 문제입니다.

딥 카피(deepClone)?

깊은 카피의 반대말은 얕은 카피입니다. 많은 초보자들이 이 개념을 접하면 매우 혼란스러워합니다.

딥 카피를 사용하는 이유는 무엇인가요?

많은 경우 변수에 값을 할당하고 메모리 주소에 값을 할당해야 합니다. 그러나 참조 값 유형을 할당하면 메모리 영역만 공유하므로 결과적으로 이전 값은 일관되게 유지됩니다.

구체적인 예 보기

// 给test赋值了一个对象
var test = {
  a: 'a',
  b: 'b'
};
 
// 将test赋值给test2
// 此时test和test2是共享了同一块内存对象，这也就是浅拷贝
var test2 = test;
 
test2.a = 'a2';
 
test.a === 'a2'// 为true

그림:

이제 왜 참조 값 유형 데이터가 서로 영향을 미치는지 쉽게 이해할 수 있습니다.

구현하려면

딥카피 기능을 구현하려면 자바스크립트의 숫자형에 대해 이야기해야 합니다.

Javascript 유형 판단

Javascript에는 다음과 같은 기본 유형이 있습니다.

유형 설명
undefine 정의되지 않은 유형은 undefound라는 하나의 값만 갖습니다. 변수에 값이 할당되지 않은 경우
null null 유형의 값도 null 값 하나만 가지며 이는 빈 개체 참조입니다.
Boolean Boolean에는 true와 false 두 가지 값이 있습니다.
String 텍스트를 나타냅니다. information
Number 숫자 정보를 나타냅니다.
Object 함수와 배열을 포함한 일련의 속성을 순서 없이 모아 놓은 것입니다. Array
typeof를 사용하면 함수와 배열을 판단하는 것이 불가능합니다. 여기서는 방법이 사용됩니다.
[기본적으로 각 개체는 Object에서 toString() 메서드를 상속합니다. 이 메서드가 개체 자체 또는 더 가까운 상위 프로토타입에서 동일한 이름 메서드로 재정의(그림자 지정)되지 않으면 개체의 toString() 메서드는 "[객체 유형]"을 반환합니다. 여기서 문자열 유형은 객체 유형을 나타냅니다.][1]

function type(obj) {
  var toString = Object.prototype.toString;
  var map = {
    '[object Boolean]' : 'boolean', 
    '[object Number]'  : 'number', 
    '[object String]'  : 'string', 
    '[object Function]' : 'function', 
    '[object Array]'  : 'array', 
    '[object Date]'   : 'date', 
    '[object RegExp]'  : 'regExp', 
    '[object Undefined]': 'undefined',
    '[object Null]'   : 'null', 
    '[object Object]'  : 'object'
  };
  return map[toString.call(obj)];
}

은 참조 값 유형이 아닌 값에 대해 deepClone

을 구현합니다. 참조 값 유형(객체)은 다시 순회하여 재귀적으로 할당해야 하는 반면 직접 할당됩니다.

function deepClone(data) {
  var t = type(data), o, i, ni;
   
  if(t === 'array') {
    o = [];
  }else if( t === 'object') {
    o = {};
  }else {
    return data;
  }
   
  if(t === 'array') {
    for (i = 0, ni = data.length; i < ni; i++) {
      o.push(deepClone(data[i]));
    }
    return o;
  }else if( t === &#39;object&#39;) {
    for( i in data) {
      o[i] = deepClone(data[i]);
    }
    return o;
  }
}

여기서 주의할 점이 있는데, 함수형의 경우 여기 블로거가 직접 값을 할당하거나 메모리 값을 공유합니다. 왜냐하면 함수는 입력값과 반환값을 가지고 특정 기능을 완성하는 것에 가깝고, 상위 비즈니스에서는 비즈니스 기능을 완성하는 것에 가깝고 실제로 함수를 딥카피할 필요가 없기 때문입니다.

그런데 함수 유형을 어떻게 복사하나요?

사실 블로거는 new를 사용해서만 동작시킬 생각만 했는데, 함수가 한 번만 실행되면 실행 결과가 어떻게 될지 상상이 안 되네요! 오(╯□╰)오! 아직은 다른 좋은 아이디어가 없으니 다들 지도 환영합니다!

이쯤 되면 deep copy가 거의 구현됐다고 생각하는 분 계시나요?

얕은 카피?

얕은 복사의 경우 공용 메모리 영역만 운영하는 것으로 이해하시면 됩니다! 여기에는 위험이 있을 것입니다! (.﹏.*)

이 공유 데이터를 통제 없이 직접 조작하게 되면 데이터의 이상이 자주 발생하고 다른 부분에 의해 변경될 수 있습니다. 따라서 데이터 소스를 직접 조작하는 것이 아니라, 데이터 소스가 데이터에 대해 CURD 연산을 수행할 수 있도록 일부 메소드를 캡슐화해야 합니다.

아마 거의 다 끝났지만, 프론트엔드로서 JavaScript 자체는 물론 DOM, 브라우저 등도 고려해야 합니다.

요소 유형

다음 코드를 보면 무엇이 반환되나요?

Object.prototype.toString.call(document.getElementsByTagName('div')[0])

답은 [object HTMLDivElement]입니다.

가끔 저장함 실수로 DOM 요소의 전체 복사를 수행한 경우 위의 전체 복사 기능은 요소 요소를 판단하지 못합니다. Element 요소를 판단하려면 instanceof를 사용하여 판단하세요. 다른 태그의 경우 tostring은 다른 태그에 해당하는 생성자를 반환합니다.

function type(obj) {
  var toString = Object.prototype.toString;
  var map = {
    '[object Boolean]' : 'boolean', 
    '[object Number]'  : 'number', 
    '[object String]'  : 'string', 
    '[object Function]' : 'function', 
    '[object Array]'  : 'array', 
    '[object Date]'   : 'date', 
    '[object RegExp]'  : 'regExp', 
    '[object Undefined]': 'undefined',
    '[object Null]'   : 'null', 
    '[object Object]'  : 'object'
  };
  if(obj instanceof Element) {
    return 'element';
  }
  return map[toString.call(obj)];
}

먼저 JSON.stringify를 전달한 다음 JSON.parse를 전달하여 전체 복사를 달성합니다. 하지만 데이터 유형은 기본 숫자 유형만 지원합니다.

var obj = {
  a: 'a', 
  b: function(){console.log('b')}
}
 
//在JSON.stringify的时候就会把function给过滤了。
 
JSON.stringify(obj)// "{"a":"a"}"

요약

Deep Copy에 대한 요약과 Deep Copy 구현 방법을 소개합니다. 다양한 시나리오에서는 비즈니스 시나리오에 따라 전체 복사를 사용해야 하는지 여부를 결정해야 합니다.

자바스크립트 딥카피(deepClone)에 대한 자세한 설명과 관련 글은 PHP 중국어 홈페이지를 주목해주세요!