Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commitc3d571a

Browse files
['instanceof'로 클래스 확인하기] 번역 리뷰
- Object.prototype.toString 부분 보완 필요함-javascript-tutorial#342
1 parentea8c68a commitc3d571a

File tree

1 file changed

+59
-59
lines changed

1 file changed

+59
-59
lines changed
Lines changed: 59 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
#클래스확인: "instanceof"
1+
#'instanceof'로클래스확인하기
22

3-
`instanceof`연산자는객체가 특정 클래스에속해 있는지 없는지를 검사합니다. 또한, 상속관계에 있는지 확인합니다.
3+
`instanceof`연산자를 사용하면객체가 특정 클래스에속하는지 아닌지를 확인할 수 있습니다.`instanceof` 상속관계도 확인해줍니다.
44

5-
확인하는 기능은많은 경우에서 필수적인데, 여기에 매개변수의 타입때문에 처리하는 법이 달라지는*다형적인* 함수를빌드하기 위해 사용할 것입니다.
5+
확인 기능은다양한 곳에서 쓰이는데, 이번 챕터에선`instanceof`를 사용해 인수의 타입에 따라 이를 다르게 처리하는*다형적인(polymorphic)* 함수를만드는데 사용해보겠습니다.
66

77
##instanceof 연산자[#ref-instanceof]
88

@@ -11,52 +11,52 @@
1111
objinstanceof Class
1212
```
1313

14-
`obj``Class`속해 있거나 상속하고 있다면, true를 반환합니다.
14+
`obj``Class`속하거나`Class`를 상속받는 클래스에 속하면`true`가 반환됩니다.
1515

1616
예시:
1717

1818
```js run
1919
classRabbit {}
2020
let rabbit=newRabbit();
2121

22-
// rabbit이Rabbit class에 속해있는지 물어봅니다.
22+
// rabbit이클래스 Rabbit의 객체인가요?
2323
*!*
2424
alert( rabbitinstanceof Rabbit );// true
2525
*/!*
2626
```
2727

28-
instanceof는 생성자 함수에서도동작합니다.
28+
`instanceof` 생성자 함수에서도사용할 수 있습니다.
2929

3030
```js run
3131
*!*
32-
//클래스 대신 함수를 사용하였습니다.
32+
//클래스가 아닌 생성자 함수
3333
functionRabbit() {}
3434
*/!*
3535

3636
alert(newRabbit()instanceof Rabbit );// true
3737
```
3838

39-
또한,`Array` 같은클래스의 내장함수로써의 기능도 있습니다.
39+
`Array` 같은내장 클래스에도 사용할 수 있습니다.
4040

4141
```js run
4242
let arr= [1,2,3];
4343
alert( arrinstanceofArray );// true
4444
alert( arrinstanceofObject );// true
4545
```
4646

47-
`arr`또한,`Object` class에 속해있다는 것을 기억하세요.`Array`원래`Object`상속하고 있습니다.
47+
위 예시에서`arr`클래스`Object`에도 속한다는 점에 주목해주시기 바랍니다.`Array`프로토타입 기반으로`Object`상속받습니다.
4848

49-
보통,`instanceof` 연산자는 프로토타입체인의확인을검사해줍니다. 또한,정적 메서드`Symbol.hasInstance`로 커스텀로직을설정할수 있습니다.
49+
`instanceof` 연산자는보통,프로토타입체인을 사용해확인을진행합니다.정적 메서드`Symbol.hasInstance`을 사용하면 직접 검사로직을설정할 수도 있습니다.
5050

51-
`obj instanceof Class`의 알고리즘은 대략적으로 다음과 같이 동작합니다.
51+
`obj instanceof Class`는 대략 아래와 같은 알고리즘으로 동작합니다.
5252

53-
1. 정적 메서드`Symbol.hasInstance`있다고 가정한다면, 그저 호출하면 됩니다.`Class[Symbol.hasInstance](obj)`.결과는`true``false`값을 반환할 것입니다. 다음은`instanceof`를 어떻게 커스텀 하는지에 대한 예시입니다.
53+
1.클래스에정적 메서드`Symbol.hasInstance`구현되어 있으면`Class[Symbol.hasInstance](obj)`를 호출합니다. 호출결과는`true``false`이어야 합니다. 이렇게 하면`instanceof`의 검사 로직을 커스터마이징 할 수 있습니다.
5454

5555
예시:
5656

5757
```js run
58-
59-
//instanceOf는 canEat 프로퍼티가 aniaml인지 확인하는 것입니다.
58+
// canEat 프로퍼티가 있으면 animal이라고 판단할 수 있도록
59+
//instanceOf의 로직을 직접 설정합니다.
6060
classAnimal {
6161
static [Symbol.hasInstance](obj) {
6262
if (obj.canEat)returntrue;
@@ -65,24 +65,24 @@ alert( arr instanceof Object ); // true
6565

6666
let obj= { canEat:true };
6767

68-
alert(objinstanceof Animal);// true: Animal에서 저희가 커스터마이즈한Symbol.hasInstance가 호출 되었기 때문에 true를 리턴했습니다.
68+
alert(objinstanceof Animal);// true, Animal[Symbol.hasInstance](obj)가 호출됨
6969
```
7070

71-
2.대부분 클래스는`Symbol.hasInstance`를 가지고 있지 않습니다. 이러한 경우, 일반적인 로직이사용될 것입니다.`obj instanceOf Class``Class.prototype``obj`프로토 체인 내부의 프로토타입 중 하나와같은지 확인합니다.
71+
2.클래스 대부분엔`Symbol.hasInstance`가 없습니다. 이럴 땐 일반적인 로직이사용됩니다.`obj instanceOf Class``Class.prototype``obj`프로토타입 체인 내부의 프로토타입 중 하나와일치하는지 확인합니다.
7272

73-
다시 말해서 하나를 다른것들과 같은지 비교하는 것입니다.
73+
비교는 차례 차례 진행됩니다.
7474
```js
7575
obj.__proto__ === Class.prototype?
7676
obj.__proto__.__proto__ === Class.prototype?
7777
obj.__proto__.__proto__.__proto__ === Class.prototype?
7878
...
79-
// 이 중 하나라도 true라면 true를리턴합니다.
80-
//다시 말하면, 위의 해당되는 것이 하나도 없다면 false 입니다. 그 말은 프로토체인의 끝에도달한다는 것을 의미합니다.
79+
// 이 중 하나라도 true라면 true를반환합니다.
80+
//그렇지 않고체인의 끝에도달하면 false를 반환합니다.
8181
```
8282

83-
위의 예제에서`rabbit.__proto__ === Rabbit.prototype`에서true이기 때문에즉시 응답을 줍니다.
83+
위 예시에서`rabbit.__proto__ === Rabbit.prototype``true`이기 때문에`instanceof``true`를 반환합니다.
8484

85-
상속의 경우는두 번째 단계에서일치됩니다.
85+
상속받은 클래스를 사용하는 경우엔두 번째 단계에서일치 여부가 확인됩니다.
8686

8787
```js run
8888
class Animal {}
@@ -99,70 +99,70 @@ alert( arr instanceof Object ); // true
9999
*/!*
100100
```
101101

102-
여기에`rabbit instanceof Animal`의 무엇과`Animal.prototype`을 비교하는 지에 대한 그림이 있습니다.
102+
아래 그림은`rabbit instanceof Animal`을 사용했을 때`Animal.prototype`과 무엇을 비교하는지를 나타냅니다.
103103

104104
![](instanceof.svg)
105105

106-
그런데,`objA``objB`프로토타입의 체인 어딘가에있다면,`true`리턴하는[objA.isPrototypeOf(objB)](mdn:js/object/isPrototypeOf)라는 메서드가있습니다.
106+
한편,`objA``objB`프로토타입 체인어딘가에있으면`true`반환해주는 메서드,[objA.isPrototypeOf(objB)](mdn:js/object/isPrototypeOf)있습니다.`obj instanceof Class``Class.prototype.isPrototypeOf(obj)`와 동일하죠.
107107

108-
`Class`생성자 그 자체는 확인할 수 없지만, 오직 프르토타입체인과`Class.prototype`은 매우 중요하므로 확인해야 합니다.
108+
`isPrototypeOf``Class`생성자를 포함하지 않고 검사하는 점이 조금 특이합니다. 검사 시 프로토타입체인과`Class.prototype`만 고려하죠.
109109

110-
언제`prototype`프로퍼티가 객체가 생성된 후에 변화되는지에 따라 흥미로운결과를이끌어 낼수 있습니다.
110+
`isPrototypeOf`의 이런 특징은 객체 생성 후`prototype` 프로퍼티가 변경되면 특이한결과를초래하기도 합니다. 아래와 같이 말이죠.
111111

112-
아래와 같이 말이죠.
112+
예시:
113113

114114
```js run
115115
function Rabbit() {}
116116
let rabbit = new Rabbit();
117117
118-
//프로토타입을 변형했습니다.
118+
//프로토타입이 변경됨
119119
Rabbit.prototype = {};
120120
121-
//...더이상 Rabbit이 아닙니다!
121+
//더 이상 Rabbit이 아닙니다!
122122
*!*
123123
alert( rabbit instanceof Rabbit ); // false
124124
*/!*
125125
```
126126

127-
## 보너스:타입을 위한Object.prototype.toString
127+
## 보너스:타입 확인을 위한Object.prototype.toString
128128

129-
이미 여러분들은 평범한 객체들이`[object Object]`의 문자열로 변환되는 것에 대해알고있습니다.
129+
일반 객체를 문자열로 변화하면`[object Object]`가 된다는 것을알고계실 겁니다.
130130

131131
```js run
132132
let obj = {};
133133
134134
alert(obj); // [object Object]
135-
alert(obj.toString()); //같습니다.
135+
alert(obj.toString()); //같은 결과가 출력됨
136136
```
137137

138-
그것은 바로`toString`으로 구현되어 있습니다. 그러나`toString`은 실질적으로 그것이 가진 기능보다더 강력하게만들어 줄 수 있는 몇 가지 숨겨진 특징들이 있습니다. 확장된 기능으로써`typeof`을 사용할수 있는데, 이것은`instanceof` 대신 사용할 수 있습니다.
138+
이렇게`[object Object]`가 되는 이유는`toString`의 구현방식 때문입니다. 그런데`toString``toString`더 강력하게만들어주는 기능이 숨겨져 있습니다.We can use it as an extended`typeof` and an alternativefor`instanceof`.
139139

140-
이상하게들리나요? 그럼 미스터리로 두죠.
140+
이상하게들리시겠지만, 미스터리를 파헤쳐보도록 하겠습니다.
141141

142-
[이곳](https://tc39.github.io/ecma262/#sec-object.prototype.tostring)에명시되어 있듯이, 객체와 실행중인 다른 값의 컨텍스트로부터 내장함수 `toString`을 사용하여 추출할수 있습니다.그리고 그 결과는그 객체가 가진 값에 의존합니다.
142+
[명세서](https://tc39.github.io/ecma262/#sec-object.prototype.tostring)에따르면, 내장 `toString`을 객체에서 추출하는 게 가능합니다. 그리고 이렇게 추출한 메서드는 어떤 값에도 실행할수 있습니다.값별 호출 결과는다음과 같습니다.
143143

144-
-숫자의 경우, 그것은`[object Number]`가 될 것입니다.
145-
-불린의 경우, 그것은`[object Boolean]`이 될 것입니다.
146-
-null의 경우, 그것은`[object Null]`가 될 것입니다.
147-
-`undefined`의 경우, 그것은`[object Undefined]`가 될 것입니다.
148-
-배열의 경우, 그것은`[object Array]`가 될 것입니다.
149-
-그외에 여러가지가 다양하게 있는데, 그것에 따라 맞춰집니다.
144+
-숫자형--`[object Number]`
145+
-불린형--`[object Boolean]`
146+
-`null`--`[object Null]`
147+
-`undefined`--`[object Undefined]`
148+
-배열--`[object Array]`
149+
-그외-- 커스터마이징 가능
150150

151-
그럼 같이 한번 해결해볼까요?
151+
예시:
152152

153153
```js run
154-
// 편의를 위해toString 메소드를변수에복사합니다.
154+
// 편의를 위해toString을변수에복사함
155155
let objectToString = Object.prototype.toString;
156156
157-
//이것의 타입은 무엇일까요?
157+
//아래 변수의 타입은 무엇일까요?
158158
let arr = [];
159159
160160
alert( objectToString.call(arr) ); // [object *!*Array*/!*]
161161
```
162162

163-
이번 챕터에서 [](info:call-apply-decorators)에 서술되어 있는 [call](mdn:js/function/call)는 함수 `objectToString`은 `this=arr` 컨텍스트에실행하기위해서 사용했습니다.
163+
위 예시에서 [call](mdn:js/function/call)은 [](info:call-apply-decorators) 챕터에서 설명한 바와 같이 `this=arr`이라는 컨텍스트를 지정하여 함수 `objectToString`를실행하기위해 사용했습니다.
164164

165-
내부적으로,`toString` 알고리즘은 `this`를 검사하고, 일치하는 결과를 반환합니다.더 많은예시를 살펴봅시다.
165+
`toString` 알고리즘은내부적으로`this`를 검사하고 상응하는 결과를 반환합니다. 예시를 살펴봅시다.
166166

167167
```js run
168168
let s = Object.prototype.toString;
@@ -174,7 +174,7 @@ alert( s.call(alert) ); // [object Function]
174174

175175
### Symbol.toStringTag
176176

177-
객체 `toString`의 기능은 특별한객체 프로퍼티 `Symbol.toStringTag`를사용함으로써 커스텀 될수 있습니다.
177+
특별객체 프로퍼티 `Symbol.toStringTag`를사용하면 `Object`의 메서드 `toString`을 커스터마이징 할수 있습니다.
178178

179179
예시:
180180

@@ -186,33 +186,33 @@ let user = {
186186
alert( {}.toString.call(user) );// [object User]
187187
```
188188
189-
대부분의특정 환경에서만 동작하는 객체를 위해, 프로퍼티같은 것들이있습니다.여기에 몇 가지 예시가 있습니다.
189+
대부분의호스트 환경은 자체 객체에 이와 유사한 프로퍼티를 구현해 놓고있습니다.브라우저 환경 관련 예시 몇 가지를 살펴봅시다.
190190
191191
```js run
192-
// 특정 환경의 객체와클래스를 위한 toStringTag :
193-
alert(window[Symbol.toStringTag]);//window
192+
// 특정호스트환경의 객체와클래스에 구현된 toStringTag
193+
alert(window[Symbol.toStringTag]);//Window
194194
alert(XMLHttpRequest.prototype[Symbol.toStringTag] );// XMLHttpRequest
195195

196196
alert( {}.toString.call(window) );// [object Window]
197197
alert( {}.toString.call(newXMLHttpRequest()) );// [object XMLHttpRequest]
198198
```
199199
200-
여러분도 아시다시피, 그 결과는 정확히`Symbol.toStringTag`(이 속성을 가지고 있다면)와 내부`[object...]`로 감싸줍니다.
200+
As you can see, the result is exactly`Symbol.toStringTag` (if exists), wrapped into`[object...]`.
201201
202-
끝으로 여려분은 원시적인 데이터 타입에 대한 작업뿐만 아니라 내장된 객체를 위한 "스테로이드들에 대한 타입"를 가지고 있고, 심지어 그것들의 커스텀도 가능합니다.
202+
At the end we have "typeof on steroids" that not only works for primitive data types, but also for built-in objects and even can be customized.
203203
204-
`{}.toString.call`대신`instanceof`내장된 객체를 단순히 타입 확인을 넘어 문자열로 타입을 얻기를 원할 때, 사용할 수 있습니다.
204+
We can use`{}.toString.call`instead of`instanceof`for built-in objects when we want to get the type as a string rather than just to check.
205205
206206
## 요약
207207
208-
여러분이 알고 있는타입 확인 메서드를요약해봅시다.
208+
지금까지 배운타입 확인 메서드를요약하면 다음과 같습니다.
209209
210-
| |동작대상 |리턴타입 |
210+
| |동작 대상|반환값 |
211211
|---------------|-------------|---------------|
212-
|`typeof` |primitives |string |
213-
|`{}.toString` |primitives, 내장된 객체,`Symbol.toStringTag`를 가진 객체 |string |
214-
|`instanceof` |objects |true/false |
212+
|`typeof` |원시형 |문자열 |
213+
|`{}.toString` |원시형, 내장 객체,`Symbol.toStringTag`가 있는 객체 |문자열 |
214+
|`instanceof` |객체 |true나false |
215215
216-
여러분도 아시다시피,`{}.toString`기술적으로`typeof`보다 '더 발전된' 것입니다.
216+
위에서 보았듯이`{}.toString``typeof`보다 '기능이 더' 많습니다.
217217
218-
그리고`instanceof`연산자는 클래스 계층에 작업하거나, 상속을 고려하여 클래스를 확인 할 때, 정말 큰 빛을 발합니다.
218+
And`instanceof`operator really shines when we are working with a class hierarchy and want to check for the class taking into account inheritance.

0 commit comments

Comments
 (0)

[8]ページ先頭

©2009-2025 Movatter.jp