-
Notifications
You must be signed in to change notification settings - Fork 846
[재작업] 1-js/09-classes/02-class-inheritance 리뷰 반영 및 오류 수정 #330
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -2,14 +2,14 @@ importance: 5 | |||||
|
||||||
--- | ||||||
|
||||||
# Extended clock | ||||||
# 시계 확장하기 | ||||||
|
||||||
We've got a `Clock` class. As of now, it prints the time every second. | ||||||
`Clock`이라는 매초 시간을 출력하는 클래스가 있습니다. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 뒤에 공백이 들어갔는데 제거 부탁드립니다. |
||||||
|
||||||
|
||||||
[js src="source.view/clock.js"] | ||||||
|
||||||
Create a new class `ExtendedClock` that inherits from `Clock` and adds the parameter `precision` -- the number of `ms` between "ticks". Should be `1000` (1 second) by default. | ||||||
`Clock`을 상속받는 `ExtendedClock`을 생성하고, `precision`이라는 매개변수를 추가해보세요. `precision`은 '초' 사이의 간격을 의미하고, 기본값은 `1000`(1초)이 되어야 합니다. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
띄어쓰기가 두 칸 들어갔네요. |
||||||
|
||||||
- Your code should be in the file `extended-clock.js` | ||||||
- Don't modify the original `clock.js`. Extend it. | ||||||
- 코드는 `extended-clock.js`라는 독립적인 파일에 작성하는 것이 좋습니다. | ||||||
- 오리지널 `clock.js`를 수정하지 마세요. 확장하세요. |
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -1,14 +1,14 @@ | ||||||
First, let's see why the latter code doesn't work. | ||||||
먼저, 해당 코드가 왜 작동하지 않는지 살펴봐야 합니다. | ||||||
|
||||||
The reason becomes obvious if we try to run it. An inheriting class constructor must call `super()`. Otherwise `"this"` won't be "defined". | ||||||
이유는 코드를 실행한다면 명백해 보입니다. 상속받는 클래스는 `super()`를 반드시 호출해야 합니다. 그렇지 않으면 `"this"` 는 "정의"되지 않기 때문이죠. | ||||||
|
||||||
So here's the fix: | ||||||
아래 수정된 코드가 있습니다. | ||||||
|
||||||
```js run | ||||||
class Rabbit extends Object { | ||||||
constructor(name) { | ||||||
*!* | ||||||
super(); // need to call the parent constructor when inheriting | ||||||
super(); // 상속할 때 부모의 생성자를 호출해야 합니다. | ||||||
*/!* | ||||||
this.name = name; | ||||||
} | ||||||
|
@@ -19,16 +19,16 @@ let rabbit = new Rabbit("Rab"); | |||||
alert( rabbit.hasOwnProperty('name') ); // true | ||||||
``` | ||||||
|
||||||
But that's not all yet. | ||||||
그런데 그게 전부는 아닙니다. | ||||||
|
||||||
Even after the fix, there's still important difference in `"class Rabbit extends Object"` versus `class Rabbit`. | ||||||
위와 같이 수정한다고 해도, 여전히 `"class Rabbit extends Object"`와 `class Rabbit` 사이에는 다른 점이 존재합니다. | ||||||
|
||||||
As we know, the "extends" syntax sets up two prototypes: | ||||||
이미 배웠듯이, "extends" 문법은 두 개의 프로토타입을 설정합니다. | ||||||
|
||||||
1. Between `"prototype"` of the constructor functions (for methods). | ||||||
2. Between the constructor functions themselves (for static methods). | ||||||
1. 생성자 함수들의 `"prototype"` 사이에 (메서드를 위한 것) | ||||||
2. 생성자 함수 자신들 사이에 (정적인 메서드를 위한 것) | ||||||
|
||||||
In our case, for `class Rabbit extends Object` it means: | ||||||
예제의 경우에는, `class Rabbit extends Object`가 뜻하는 것은 아래와 같습니다. | ||||||
|
||||||
```js run | ||||||
class Rabbit extends Object {} | ||||||
|
@@ -37,45 +37,45 @@ alert( Rabbit.prototype.__proto__ === Object.prototype ); // (1) true | |||||
alert( Rabbit.__proto__ === Object ); // (2) true | ||||||
``` | ||||||
|
||||||
So `Rabbit` now provides access to static methods of `Object` via `Rabbit`, like this: | ||||||
그래서 `Rabbit` 이 `Object` 의 정적인 메서드에 `Rabbit` 을 통해서 접근할 수 있게 해야 합니다. 아래와 같이 말이죠. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
```js run | ||||||
class Rabbit extends Object {} | ||||||
|
||||||
*!* | ||||||
// normally we call Object.getOwnPropertyNames | ||||||
// 보통은 Object.getOwnPropertyNames 로 호출합니다. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
alert ( Rabbit.getOwnPropertyNames({a: 1, b: 2})); // a,b | ||||||
*/!* | ||||||
``` | ||||||
|
||||||
But if we don't have `extends Object`, then `Rabbit.__proto__` is not set to `Object`. | ||||||
그러나 `extends Object`가 없다면, `Rabbit.__proto__` 은 `Object`로 설정되지 않습니다. | ||||||
|
||||||
Here's the demo: | ||||||
아래에 예시가 있습니다. | ||||||
|
||||||
```js run | ||||||
class Rabbit {} | ||||||
|
||||||
alert( Rabbit.prototype.__proto__ === Object.prototype ); // (1) true | ||||||
alert( Rabbit.__proto__ === Object ); // (2) false (!) | ||||||
alert( Rabbit.__proto__ === Function.prototype ); // as any function by default | ||||||
alert( Rabbit.prototype.__proto__ === Object.prototype ); // (1) (true Rabbit의 프로토타입은 객체의 프로토타입입니다. - Chris) | ||||||
alert( Rabbit.__proto__ === Object ); // (2) false (!) (Rabbit의 프로토타입은 객체가 아닙니다. - Chris) | ||||||
alert( Rabbit.__proto__ === Function.prototype ); // 어떠한 함수든 기본으로 (__proto__는 함수의 프로토타입입니다. - Chris) | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 번역하신 분의 이름이 아니라 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||||||
|
||||||
*!* | ||||||
// error, no such function in Rabbit | ||||||
alert ( Rabbit.getOwnPropertyNames({a: 1, b: 2})); // Error | ||||||
alert ( Rabbit.getOwnPropertyNames({a: 1, b: 2})); // 에러 | ||||||
*/!* | ||||||
``` | ||||||
|
||||||
So `Rabbit` doesn't provide access to static methods of `Object` in that case. | ||||||
그래서 `Rabbit`은 `Object`의 정적 메서드에 접근을 할 수 없습니다. | ||||||
|
||||||
By the way, `Function.prototype` has "generic" function methods, like `call`, `bind` etc. They are ultimately available in both cases, because for the built-in `Object` constructor, `Object.__proto__ === Function.prototype`. | ||||||
어쨌든 `Function.prototype` 은 `call`, `bind` 기타 등등의 "제네릭" 함수의 메서드를 가집니다. 제네릭 함수들은 궁극적으로 두 가지 경우에 모두 사용 가능합니다. 왜냐하면, `Object`의 내장된 생성자는 `Object.__proto__ === Function.prototype` 이기 때문이죠. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
Here's the picture: | ||||||
이해를 돕기 위한 그림이 있습니다. | ||||||
|
||||||
 | ||||||
|
||||||
So, to put it short, there are two differences: | ||||||
그래서, 짧게 요약하면 두 가지 다른 점이 있습니다. | ||||||
|
||||||
| class Rabbit | class Rabbit extends Object | | ||||||
|--------------|------------------------------| | ||||||
| -- | needs to call `super()` in constructor | | ||||||
| -- | `super()`를 생성자에서 호출해야 합니다. | | ||||||
| `Rabbit.__proto__ === Function.prototype` | `Rabbit.__proto__ === Object` | |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
조금 더 의미 전달이 잘 되게 수정해 보았습니다. 😀