Skip to content

[재작업] 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

Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
That's because the child constructor must call `super()`.
인스턴스를 생성할 수 없었던 이유는 자식의 생성자가 `super()`를 호출해야 하기 때문입니다.

Here's the corrected code:
아래에 올바른 코드가 있습니다.

```js run
class Animal {
Expand All @@ -21,7 +21,7 @@ class Rabbit extends Animal {
}

*!*
let rabbit = new Rabbit("White Rabbit"); // ok now
let rabbit = new Rabbit("White Rabbit"); // 이제 생성됩니다.
*/!*
alert(rabbit.name); // White Rabbit
```
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ importance: 5

---

# Error creating an instance
# 인스턴스 생성 오류

Here's the code with `Rabbit` extending `Animal`.
아래에 `Animal` 클래스를 상속하는 `Rabbit` 코드가 있습니다.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
아래에 `Animal` 클래스를 상속하는 `Rabbit` 코드가 있습니다.
아래에 `Animal` 클래스를 상속하는 `Rabbit` 클래스에 대한 코드가 있습니다.

조금 더 의미 전달이 잘 되게 수정해 보았습니다. 😀


Unfortunately, `Rabbit` objects can't be created. What's wrong? Fix it.
아직은 `Rabbit` 객체를 생성할 수 없습니다. 무엇이 잘못된 것일까요? 코드를 수정해보세요.
```js run
class Animal {

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ importance: 5

---

# Extended clock
# 시계 확장하기

We've got a `Clock` class. As of now, it prints the time every second.
`Clock`이라는 매초 시간을 출력하는 클래스가 있습니다.
Copy link
Contributor

Choose a reason for hiding this comment

The 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초)이 되어야 합니다.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
`Clock`을 상속받는 `ExtendedClock`을 생성하고, `precision`이라는 매개변수를 추가해보세요. `precision`은 '초' 사이의 간격을 의미하고, 기본값은 `1000`(1초)이 되어야 합니다.
`Clock`을 상속받는 `ExtendedClock`을 생성하고, `precision`이라는 매개변수를 추가해보세요. `precision`은 '초' 사이의 간격을 의미하고, 기본값은 `1000`(1초)이 되어야 합니다.

띄어쓰기가 두 칸 들어갔네요.


- 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;
}
Expand All @@ -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 {}
Expand All @@ -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` 을 통해서 접근할 수 있게 해야 합니다. 아래와 같이 말이죠.
Copy link
Contributor

@JuYeong0413 JuYeong0413 Oct 25, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
그래서 `Rabbit` `Object` 의 정적인 메서드에 `Rabbit` 을 통해서 접근할 수 있게 해야 합니다. 아래와 같이 말이죠.
그래서 `Rabbit``Object`의 정적 메서드에 `Rabbit`을 통해서 접근할 수 있게 해야 합니다. 아래와 같이 말이죠.


```js run
class Rabbit extends Object {}

*!*
// normally we call Object.getOwnPropertyNames
// 보통은 Object.getOwnPropertyNames 로 호출합니다.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// 보통은 Object.getOwnPropertyNames 로 호출합니다.
// 보통은 Object.getOwnPropertyNames 로 호출합니다.

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)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

번역하신 분의 이름이 아니라 옮긴이라는 단어가 들어가는 것이 아닐까요...?
저는 옮긴이라고 추가하는 것으로 번역 규칙을 이해했는데, 이 부분은 보라님께서 확인하시고 말씀해 주시면 좋을 것 같아요. 😃

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

옮긴이가 맞아요~ 제가 작업중이어서 이 PR엔 이제 리뷰 안해주셔도 될것같습니다.


*!*
// 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` 이기 때문이죠.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
어쨌든 `Function.prototype` `call`, `bind` 기타 등등의 "제네릭" 함수의 메서드를 가집니다. 제네릭 함수들은 궁극적으로 두 가지 경우에 모두 사용 가능합니다. 왜냐하면, `Object`의 내장된 생성자는 `Object.__proto__ === Function.prototype` 이기 때문이죠.
어쨌든 `Function.prototype``call`, `bind` 등의 "제네릭" 함수의 메서드를 가집니다. 제네릭 함수들은 궁극적으로 두 가지 경우에 모두 사용 가능합니다. 왜냐하면, `Object`의 내장된 생성자는 `Object.__proto__ === Function.prototype`이기 때문이죠.


Here's the picture:
이해를 돕기 위한 그림이 있습니다.

![](rabbit-extends-object.svg)

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` |
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ importance: 5

---

# Class extends Object?
# 객체를 확장하는 클래스?

As we know, all objects normally inherit from `Object.prototype` and get access to "generic" object methods like `hasOwnProperty` etc.
이미 살펴보았듯이, 보통 모든 객체들은 `Object.prototype` 으로 부터 상속되고 `hasOwnProperty` 같은 "generic(제네릭)" 객체의 메서드에 접근이 가능합니다.

For instance:
아래 예시가 있습니다.

```js run
class Rabbit {
Expand All @@ -18,16 +18,16 @@ class Rabbit {
let rabbit = new Rabbit("Rab");

*!*
// hasOwnProperty method is from Object.prototype
// hasOwnProperty 메서드는 Object.prototype 으로 부터 왔습니다.
alert( rabbit.hasOwnProperty('name') ); // true
*/!*
```

But if we spell it out explicitly like `"class Rabbit extends Object"`, then the result would be different from a simple `"class Rabbit"`?
그런데 만약에 명시적으로 `"class Rabbit extends Object"` 라고 사용한다면, 결과는 간단히 `"class Rabbit"`로 사용하는 것과 다를까요?

What's the difference?
그렇다면 무엇이 다를까요?

Here's an example of such code (it doesn't work -- why? fix it?):
아래에 작동하지 않는 예시가 있습니다. 어디가 잘못된 것일까요? 작동하게 수정할 수 있을까요?

```js
class Rabbit extends Object {
Expand Down
Loading