(12) 포장 대상

정의
대상 은 자 바스 크 립 트 언어의 가장 주요 한 데이터 형식 으로 세 가지 원시 유형의 값 인 수치, 문자열, 불 값 은 일정한 조건 에서 도 자동 으로 대상, 즉 원시 유형의 '포장 대상' 으로 전환 된다.
'포장 대상' 이란 수치, 문자열, 불 값 에 대응 하 는 Number, String, Boolean 세 개의 원생 대상 이다.이 세 개의 원생 대상 은 원시 유형의 값 을 대상 으로 바 꿀 수 있다.

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

상기 코드 에서 원시 유형의 값 을 바탕 으로 세 개의 대응 하 는 포장 대상 을 생 성 했다.

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

요약 하면 이 세 개의 대상 을 구조 함수 로 사용 할 때 (new 가 있 음) 원시 유형의 값 을 대상 으로 바 꿀 수 있다.일반 함수 로 사용 할 때 (new 가 없 음) 임의의 형식의 값 을 원본 형식의 값 으로 바 꿀 수 있 습 니 다.
2 실례 방법
포장 대상 의 인 스 턴 스 는 Object 대상 이 제공 하 는 원생 방법 을 사용 할 수 있 습 니 다. 주로 value Of 방법 과 toString 방법 입 니 다.
2.1 valueOf()
value Of 방법 은 포장 대상 의 실례 에 대응 하 는 원시 형식의 값 을 되 돌려 줍 니 다.

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

2.2 toString()
toString 방법 은 해당 하 는 문자열 형식 을 되 돌려 줍 니 다.

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

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

'abc'.length // 3

위의 코드 에서 abc 는 문자열 입 니 다. 그 자체 가 대상 이 아니 므 로 length 속성 을 호출 할 수 없습니다.자 바스 크 립 트 엔진 은 자동 으로 포장 대상 으로 전환 하여 이 대상 에서 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 의 포장 대상 은 여러 속성 을 제공 합 니 다.
자동 변환 생 성 된 포장 대상 은 읽 기만 하고 수정 할 수 없습니다.따라서 문자열 에 새 속성 을 추가 할 수 없습니다.

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

위의 코드 는 문자열 s 에 x 속성 을 추 가 했 습 니 다. 결과 가 잘못 되 었 습 니 다. 항상 undefined 로 돌아 갑 니 다.
다른 한편, 호출 이 끝나 면 포장 대상 의 인 스 턴 스 는 자동 으로 소각 된다.이것 은 다음 문자열 의 속성 을 호출 할 때 실제 적 으로 새로 생 성 된 대상 을 호출 하 는 것 이지 지난번 호출 할 때 생 성 된 대상 이 아니 기 때문에 이전 대상 의 속성 을 할당 할 수 없다 는 것 을 의미한다.문자열 에 속성 을 추가 하려 면 프로 토 타 입 대상 String. prototype 에서 만 정의 합 니 다.
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 불 리 언 대상
5.1 개술
Boolean 대상 은 JavaScript 의 세 개의 포장 대상 중 하나 입 니 다.구조 함수 로 서 불 값 을 만 드 는 포장 대상 인 스 턴 스 를 만 드 는 데 사 용 됩 니 다.

var b = new Boolean(trueb   Boolean     ，       ，     true。


  ，false         ，        true。



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

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

()) {
  console.log('true');
} //    

위의 코드 의 첫 번 째 예 가 true 를 얻 은 이 유 는 false 에 대응 하 는 포장 대상 인 스 턴 스 가 하나의 대상 이 고 논리 적 연산 을 할 때 자동 으로 불 값 true 로 전환 되 기 때 문 입 니 다 (모든 대상 이 대응 하 는 불 값 이 true 이기 때 문 입 니 다).인 스 턴 스 의 value Of 방법 은 인 스 턴 스 에 대응 하 는 원시 값 을 되 돌려 줍 니 다. 이 예 는 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

위의 코드 중 몇 가지 트 루 를 얻 은 상황 은 모두 진지 하 게 기억 할 만하 다.참고 로 이중 연산 자 (!) 를 사용 해도 임의의 값 을 대응 하 는 불 값 으로 바 꿀 수 있 습 니 다.

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

마지막 으로 일부 특수 치 에 대해 불 린 대상 앞 에 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

본 고 는 완 일 봉 선생님 의 블 로그 인 을 대량으로 참고 하여 그의 글 은 저 에 게 많은 이익 을 주 었 습 니 다. 이에 진심으로 감 사 를 드 립 니 다!