JavaScript 기본 유형 및 참조 유형에 대한 간략한 분석

JavaScript 유형의 경우 다음과 같이 간단히 요약할 수 있습니다. 강력한 유형의 언어에 비해 약한(느슨한) 유형의 언어이며 기본 유형과 참조 유형이 있으며 차이점은 고정된 공간이 있다는 것입니다. 스택 메모리에서는 고정되지 않은 공간이 힙 메모리에 저장되고 구현 위치에 대한 포인터가 스택 메모리에 저장됩니다.

시중에 나와 있는 많은 책에는 이야기할 공간이 많습니다. 이 기사에서는 JavaScript, 특히 JavaScript 유형에 대한 기본적인 이해가 필요한 여러 측면을 다룰 것입니다. 아직도 이해가 되지 않는다면 이 글을 읽기 전에 JavaScript에 관한 책을 먼저 읽어보세요.

1. 기본 유형과 참조 유형

1. 기본 유형: 정의되지 않음/Null/부울/숫자/문자열
2. 참조 유형: 객체/배열/함수/날짜/RegExp/오류/맵/설정…

왜 참조 유형을 열거하지 않았나요? 적어도 제가 말하는 이 글에서는 이 정도만 알아도 충분하니까요. 다른 것들은 거의 사용되지 않을 수 있으며 Map 및 Set과 같은 것조차도 모든 브라우저에서 지원되지 않습니다.

2. 자바스크립트 유형 판단

JavaScript에는 유형을 결정하는 데 사용할 수 있는 두 가지 연산자가 있습니다. 이들은 typeof와 instanceof이지만 원이 매우 작고 잘 섞이지 않으며 매우 신뢰할 수 없습니다. 몇몇 경우에는 정확하지만 많은 경우에는 신뢰할 수 없습니다. 한 번 살펴보면 알 수 있습니다.

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

// 신뢰할 수 있는 경우:
typeof ' sofish' // string
new String('sofish') instanceof String // true

// 신뢰할 수 없는 경우:
typeof [] // object
typeof null // object
'sofish' instanceof String // false

흠~ 어쩌면 많은 초보 JavaScript 프로그래머들이 이 때문에 욕을 하게 될지도 모르겠습니다. 대부분의 사람들은 JS를 사용해야 할 때 이미 jQuery와 같은 라이브러리를 가지고 있으므로 유형을 쉽게 감지할 수 있습니다. 물론 실제로는 "JavaScript에서는 모든 것이 객체입니다"라는 말이 많은 문서에서 언급된 것처럼 undefed는 실제로는 NaN 및 Infinity와 같은 전역 속성일 뿐이므로 감지하는 것이 번거롭지 않습니다. 아마 당신도 알고 있을 겁니다. 하지만 "객체"가 도움이 될 수 있습니다.

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

/ * 탐지 객체 유형 
 * @param: obj {JavaScript Object}
 * @param: type {String} 대문자로 시작하는 JS 유형 이름 
 * @return: {Boolean}
 */
 함수는(obj, type) {
 return Object.prototype.toString.call(obj).slice(8, -1) === type;
}

이 경우 is 함수를 사용하면 유형을 결정하는 데 도움이 될 수 있으며 이 간단한 함수는 호환성이 좋고 프로젝트에서 사용할 수 있습니다. 예:

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

is('sofish', 'String' ) // true
is(null, 'Null') // true
is(new Set(), 'Set') // true

3. 자바스크립트 유형 변환

자바스크립트에서는 변수(속성)의 유형을 변경할 수 있습니다. 가장 일반적인 것은 문자열과 숫자 간의 변환입니다. 1 '2'를 12로 바꾸는 방법은 무엇입니까? JavaScript의 수학 연산자이자 문자열 하이픈인 연산자에 대한 이해가 필요합니다. 따라서 초보자는 기호를 사용할 때 때때로 계산이 원하는 것과 다르지만 - 기호를 사용하면 항상 "올바른" 답을 얻을 수 있다는 흥미로운 현상을 보게 됩니다.

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

'2' // '12' 
( '2') // 3
- '2' // -1

이는 실제로 의 이중 역할로 인해 발생합니다. 위 코드에서 두 번째 표현식은 String 앞에 숫자를 사용하여 해당 클래스가 Number로 변환되도록 하는 것을 알 수 있습니다. JavaScript 유형 변환에 대한 이해는 대부분의 경우 이중 역할이 있다는 점만 이해하면 충분합니다. 이해 가능한 다른 클래스는 할당/오버로딩을 사용하여 수정할 수 있습니다. 오류:

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

var err = new Error();
console .log(err instanceof Error) // true

err = 'sofish';
console.log(err) // 'sofish'

4. JavaScript 참조 유형

이 글에서는 이것이 난점입니다. 기본 유형과 비교하여 참조는 속성과 메서드를 추가할 수 있습니다. 참조와 유사한 값은 참조이며 참조 유형의 값은 변수에 할당되며 힙 메모리에 저장된 동일한 값을 가리킵니다. 변수(속성)는 오버로드될 수 있지만 복사는 매우 흥미로운 일이 될 수 있습니다. 이에 대해서는 나중에 자세히 설명하겠습니다.

1. 속성 및 메소드 추가

다음 코드에서는 기본적으로 유사한 값을 할당하면 오류를 보고하지 않지만 가져올 때 유효하지 않음을 확인할 수 있습니다.

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

var arr = [1,2,3];
arr.hello = 'world';
console .log(arr.hello); // '세계'

var str = 'sofish';
str.hello = 'world';
console.log(str.hello) // 정의되지 않음

2. 참조 유형 값에 대한 연산

참조 유형은 참조로 스택 메모리에 저장되므로 동일한 원래 값을 가리키면 값에 대한 작업이 모든 참조에 영향을 미칩니다. 여기서는 재할당의 예입니다(값 작업이 아님). 직접 조작)은 원래 값을 변경하지 않고 객체를 다시 생성합니다. 예:

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

var arr = [1, 2,3] , sofish = arr;
sofish.push('hello world');
console.log(arr) // [1, 2, 3, 'hello world']

// 동일하지 않은 유형
sofish = ['not a fish']; // sofish가 유사하게 변경되면 원래 값은 변경되지 않습니다.
console.log(arr) // [ 1, 2, 3, 'hello world']

3. 참조 유형 값 복사

원래 값에 대한 작업은 모든 참조에 영향을 미치며, 이는 반드시 우리가 원하는 것은 아닙니다. 작업 중에 다른 참조에 영향을 주지 않고 새로운 개체를 복사해야 하는 경우도 있습니다. 일반적으로 Date/Function/RegExp...와 같은 특정 작업은 거의 없으며 주로 Array 및 Object에 항목 및 속성을 추가하는 작업과 같은 작업입니다. 따라서 우리가 이해해야 할 가장 중요한 것은 Array 및 Object 객체를 복사하는 방법입니다.

3.1 배열 복사

Array 객체에는 가로채는 배열을 반환하는 슬라이스 메서드가 있습니다. ES5에서는 필터 등도 새 배열을 반환하므로 이 메서드를 사용하여 복사할 수 있습니다.

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

var arr = [1, 2, 3 ];
var sofish = arr.slice();

// 새 배열에 대한 작업은 원래 배열에 영향을 주지 않습니다.
sofish.push('hello world');
console.log(arr) // [1, 2, 3]

3.2 객체 복사

Array를 복사하기 위해 슬라이스 메소드를 사용합니다. 실제로 Array와 Object 모두 for ... in 루프를 사용하여 복사할 값을 할당하고 순회할 수 있습니다.

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

var obj = { name: 'sofish' }, sofish = {}, p;
for (p in obj) sofish[p] = obj[p];

//새 객체에 대한 작업은 원래 값에 영향을 미치지 않습니다.
sofish.say = function() {};
console.log(obj); // { name: 'sofish' }

3.3 섀도우/딥카피

위와 같은 작업을 우리는 흔히 얕은 복사(Shadow Copy)라고 부릅니다. 그러나 Array와 Object는 모두 여러 레이어(차원)를 가질 수 있습니다. 이와 같은 복사본은 가능한 값 중 최상위 레이어의 값만 고려합니다. Array와 Object는 여전히 원본 객체를 가리킵니다. 예:

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

var arr = [1, { bio: '물고기 아님' } ], sofish = [], p;
for(p in arr) {
sofish[p] = arr[p];
}

// `sofish`에 포함된 `cat` 개체에 대한 작업은 원래 값에 영향을 미칩니다.
sofish[1].bio = 'hackable';
console.log(arr);// [1 , cat: { bio: 'hackable' } ]

그럼 어떻게 해야 할까요? 이 문제를 해결하기 위해 copy() 함수를 사용해 보겠습니다.

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

/* 복사 객체
 * @param: obj {JavaScript Object} 원본 객체
 * @param: isDeep {Boolean} 전체 복사 여부
 * @return: {JavaScript Object} 새 객체 반환 
 */
function copy(obj, isDeep) {
 var ret = obj.slice ? [] : {}, p, prop;
 // is와 함께 사용 함수 
 if(!isDeep && is(obj, 'Array')) return obj.slice();
 for(p in obj) {
 if(!obj.hasOwnProperty(p)) continue; 
 prop = obj[p];
 ret[p] = (is(prop, 'Object') || is(prop, 'Array')) ? 
 copy(prop, isDeep) : prop ; 
 }
 return ret;
}

이런 방식으로 copy(obj, isDeep) 함수를 통해 배열이나 객체를 복사할 수 있습니다. 테스트할 수 있습니다.

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

var arr = [ 1, {bio : '물고기 아님'}];
var sofish = copy(arr);

// 첫 번째 레이어의 얕은 복사 작업은 원래 값에 영향을 주지 않지만 두 번째 레이어에는 영향을 줍니다.
sofish.push('cat')
console.log(arr) // [ 1, {bio: 'not a fish'}]
sofish[1].bio = 'hello world';
console.log(arr) // [1, {bio: 'hello world'}]

// 딥 카피는 원래 값에 영향을 미치지 않습니다
sofish = copy(arr, 1);
sofish[1].bio = 'foo or bar';
console.log(arr) ; // [1, {bio: 'hello world'}]

그렇습니다. 기본적으로 이해해야 할 유형에 대한 어려운 점을 모두 이해해야 합니다. 물론 복사가 가장 번거로운 점은 자주 연산해야 하는 Array, Object 외에 Date/Function/RegExp 복사도 있습니다.