포장 대상

1. 포장 대상 의 정의
어떤 사람 은 자 바스 크 립 트 언어 가 모든 것 을 대상 으로 한다 고 말한다.이것 은 배열 과 함수 가 본질 적 으로 대상 이기 때문에 세 가지 원시 유형의 값 인 수치, 문자열, 불 값 도 일정한 조건 에서 자동 으로 대상 으로 바 뀌 기 때문이다. 즉, 원시 유형의 '포장 대상' 이다.
이른바 '포장 대상' 이란 수치, 문자열, 불 값 에 대응 하 는 Number, String, Boolean 세 개의 원생 대상 이다.이 세 개의 원생 대상 은 원시 유형의 값 을 대상 으로 바 꿀 수 있다.

var v1 = new Number(123);
var v2 = new String('abc');
var v3 = new Boolean(true);

위의 코드 는 원본 형식의 값 에 따라 세 개의 대상 을 생 성 했 고 원본 값 의 유형 과 다르다.이것 은 typeof 연산 자 를 사용 하면 알 수 있다.

typeof v1 // "object"
typeof v2 // "object"
typeof v3 // "object"

v1 === 123 // false
v2 === 'abc' // false
v3 === true // false

자 바스 크 립 트 디자인 포장 대상 의 가장 큰 목적 은 먼저 자 바스 크 립 트 의 '대상' 이 모든 값 을 포함 하도록 하 는 것 이다.그 다음으로 원시 유형의 값 이 특정한 방법 을 편리 하 게 호출 할 수 있 도록 한다.Number, String 와 Boolean 구조 함수 로 호출 되 지 않 으 면 (즉 호출 시 추가 되 지 않 음 new 임의의 형식의 값 을 수치, 문자열, 불 값 으로 바 꾸 는 데 자주 사용 된다.

Number(123) // 123
String('abc') // "abc"
Boolean(true) // true

위의 이러한 데이터 형식의 전환 은 1 절 을 참조 하 십시오.
한 마디 로 하면 이 세 대상 을 구조 함수 로 사용 할 때 new 원시 유형의 값 을 대상 으로 바 꿀 수 있다.일반 함수 로 사용 할 때 new 임의의 종류의 값 을 원본 형식의 값 으로 바 꿀 수 있 습 니 다.
2. 포장 대상 실례 의 방법
포장 대상 인 스 턴 스 는 Object 대상 이 제공 하 는 원생 방법 을 사용 할 수 있 는데 주로 valueOf 방법 과 toString 방법 이다.
2.1valueOf() valueOf 방법 은 포장 대상 의 실례 에 대응 하 는 원시 유형의 값 을 되 돌려 준다.

new Number(123).valueOf()  // 123
new String("abc").valueOf() // "abc"
new Boolean("true").valueOf() // true

2.2toString() toString 방법 은 실례 에 대응 하 는 문자열 형식 을 되 돌려 줍 니 다.

new Number(123).toString() // "123"
new String("abc").toString() // "abc"
new Boolean("true").toString() // "true"

3. 원본 형식의 자동 변환
원본 형식의 값 은 자동 으로 대상 으로 호출 할 수 있 습 니 다. 즉, 각종 대상 의 방법 과 파 라 메 터 를 호출 할 수 있 습 니 다.이때 자 바스 크 립 트 엔진 은 자동 으로 원본 형식의 값 을 포장 대상 으로 바 꾸 어 사용 후 즉시 소각 합 니 다.
예 를 들 어 문자열 은 length 속성 을 호출 하여 문자열 의 길 이 를 되 돌려 줍 니 다.

'abc'.length // 3

위의 코드 에서 abc 는 문자열 로 그 자체 가 대상 이 아니 므 로 length 속성 을 호출 할 수 없습니다.JavaScript 엔진 은 자동 으로 포장 대상 으로 전환 하여 이 대상 에서 length 속성 을 호출 합 니 다.호출 이 끝나 면 이 임시 대상 은 소 각 될 것 이다.이것 을 원시 유형의 자동 전환 이 라 고 한다.

var str = 'abc';
str.length // 3

//    
var strObj = new String(str)
// String {
//   0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"
// }
strObj.length // 3

위의 코드 에서 문자열 abc 의 포장 대상 은 각 위치의 값, length 속성, 그리고 내부 속성 [[PrimitiveValue]] 이 문자열 의 원시 값 을 저장 합 니 다.이 [[PrimitiveValue]] 내부 속성 은 외부 에서 호출 할 수 없 으 며 ValueOf 또는 toString 같은 방법 으로 내부 에서 만 호출 할 수 있 습 니 다.
이 임시 대상 은 읽 기만 하고 수정 할 수 없다.따라서 문자열 에 새 속성 을 추가 할 수 없습니다.

var s = 'Hello World';
s.x = 123;
s.x // undefined

위의 코드 는 문자열 s 에 하나의 x 속성 을 추가 하 였 으 며, 결 과 는 유효 하지 않 으 며, 항상 되 돌아 갑 니 다 undefined.
한편, 호출 이 끝나 면 임시 대상 은 자동 으로 폐기 된다.이것 은 다음 문자열 의 속성 을 호출 할 때 실제 적 으로 새로 생 성 된 대상 을 호출 하 는 것 이지 지난번 호출 할 때 생 성 된 대상 이 아니 기 때문에 이전 대상 의 속성 을 할당 할 수 없다 는 것 을 의미한다.문자열 에 속성 을 추가 하려 면 원형 대상 String.prototype 에서 만 정의 합 니 다.
이러한 원시 유형 값 을 직접 호출 할 수 있 는 방법 은 아직도 매우 많다 (상세 한 것 은 뒷글 에서 각 포장 대상 에 대한 소개 참조). 앞에서 소개 한 valueOf 과 toString 방법 을 제외 하고 세 개의 포장 대상 이 각각 원형 에 사용자 정의 하 는 방법 도 포함한다.

'abc'.charAt === String.prototype.charAt
// true

위의 코드 에 따 르 면 문자열 abc 의 charAt 방법 은 실제 적 으로 String 대상 의 원형 에 정 의 된 방법 prototype 대상 에 대한 소 개 는 '대상 을 대상 으로 프로 그래 밍' 장 참조) 이다.
만약 에 포장 대상 과 원시 유형 값 을 혼합 연산 하면 포장 대상 은 원시 유형 (실제 적 으로 자신 을 호출 하 는 valueOf 방법) 으로 바 뀔 것 이다.

new Number(123) + 123 // 246
new String('abc') + 'abc' // "abcabc"

4. 사용자 정의 방법
세 가지 포장 대상 은 원형 에 사용자 정의 방법 과 속성 을 추가 하여 원시 유형의 값 을 직접 호출 할 수 있다.
예 를 들 어 우 리 는 문자열 과 숫자 를 배로 늘 리 는 double 방법 을 추가 할 수 있다.

String.prototype.double = function () {
  return this.valueOf() + this.valueOf();
};

'abc'.double()
// abcabc

Number.prototype.double = function () {
  return this.valueOf() + this.valueOf();
};

(123).double()
// 246

위의 코드 는 123 밖 에 괄호 를 붙 여야 한다. 그렇지 않 으 면 뒤의 점 연산 자 . 가 소수점 으로 해 석 될 것 이다.
그러나 이러한 사용자 정의 방법 과 속성 체 제 는 포장 대상 의 원형 에 만 정의 할 수 있 고 원시 유형의 변수 에 속성 을 직접 추가 하면 무효 입 니 다.

var s = 'abc';

s.p = 123;
s.p // undefined

위의 코드 는 문자열 abc 에 속성 을 직접 추가 하 였 으 나 결과 가 잘못 되 었 습 니 다.주요 원인 은 위 에서 말 한 것 처럼 이곳 의 포장 대상 은 자동 으로 생 성 되 고 할당 후 자동 으로 소각 되 기 때문에 마지막 줄 은 실제 적 으로 새로운 포장 대상 을 호출 한 것 이다.
5. Boolean 대상
5.1 개술Boolean 대상 은 자 바스 크 립 트 의 세 가지 포장 대상 중 하나 이다.구조 함수 로 서 주로 불 값 의 포장 대상 을 만 드 는 인 스 턴 스 입 니 다.

var b = new Boolean(true);

typeof b // "object"
b.valueOf() // true

위 코드 의 변수 b 는 Boolean 대상 의 인 스 턴 스 입 니 다. 그 유형 은 대상 이 고 값 은 불 값 true 입 니 다.이런 문법 은 너무 번 거 로 워 서 거의 아무 도 사용 하지 않 고 변수 에 대한 직접적인 할당 이 더욱 간단 하고 뚜렷 하 다.

var b = true;

주의 하 세 요. false 대응 하 는 포장 대상 인 스 턴 스, 불 연산 결과 도 true 입 니 다.

if (new Boolean(false)) {
  console.log('true');
} // true

if (new Boolean(false).valueOf()) {
  console.log('true');
} //    

상기 코드 의 첫 번 째 예 true 를 얻 은 이 유 는 false 대응 하 는 포장 대상 인 스 턴 스 가 하나의 대상 이 고 논리 적 연산 을 할 때 자동 으로 불 값 true 으로 바 뀌 었 기 때문이다. (모든 대상 이 대응 하 는 불 값 이 true 이기 때문이다.한편, 인 스 턴 스 valueOf 방법 은 인 스 턴 스 에 대응 하 는 원시 값 을 되 돌려 주 고 이 예 는 false 이다.
5.2 Boolean 함수 의 유형 변환 작용Boolean 대상 은 구조 함수 외 에 도 단독으로 사용 할 수 있 고 임 의 값 을 불 값 으로 바 꿀 수 있다.이때 Boolean 는 단순 한 도구 방법 이다.

Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean('') // false
Boolean(NaN) // false

Boolean(1) // true
Boolean('false') // true
Boolean([]) // true
Boolean({}) // true
Boolean(function () {}) // true
Boolean(/foo/) // true

위의 코드 중 몇 가지 true 를 얻 은 상황 은 모두 진지 하 게 기억 해 야 한다.
이중 연산 자 ! 를 사용 해도 임의의 값 을 대응 하 는 불 값 으로 바 꿀 수 있다.

!!undefined // false
!!null // false
!!0 // false
!!'' // false
!!NaN // false
!!1 // true
!!'false' // true
!![] // true
!!{} // true
!!function(){} // true
!!/foo/ // true

마지막 으로 일부 특수 치 에 대해 Boolean 대상 앞 에 플러스 new 를 넣 으 면 완전히 상 반 된 결 과 를 얻 을 수 있 으 므 로 조심해 야 한다.

if (Boolean(false)) {
  console.log('true');
} //    

if (new Boolean(false)) {
  console.log('true');
} // true

if (Boolean(null)) {
  console.log('true');
} //    

if (new Boolean(null)) {
  console.log('true');
} // true