Skip to content

[재작업 완료] #85 Class inheritance & #177 Curring PR #266

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
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 @@ -4,9 +4,9 @@ importance: 5

# Error creating an instance

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

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

Expand All @@ -24,7 +24,7 @@ class Rabbit extends Animal {
}

*!*
let rabbit = new Rabbit("White Rabbit"); // Error: this is not defined
let rabbit = new Rabbit("White Rabbit"); // 에러: 정의되지 않음
*/!*
alert(rabbit.name);
```
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`이라는 매초 시간을 출력하는 클래스가 있습니다.

[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`이라는 매개변수를 추가해보세요 -- "ticks" 사이에 ms의 수 만큼. 1000 (1 second)를 기본값으로 하는것이 좋습니다.

- 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` 을 통해서 접근할 수 있게 해야 합니다. 아래와 같이 말이죠.

```js run
class Rabbit extends Object {}

*!*
// normally we call 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의 프로토타입은 객체의 프로토타입 입니다.
alert( Rabbit.__proto__ === Object ); // (2) false (!) Rabbit의 프로토타입은 객체가 아닙니다.
alert( Rabbit.__proto__ === Function.prototype ); // 어떠한 함수든 기본으로 __proto__는 함수의 프로토타입 입니다.

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

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` 같은 "제네릭" 객체의 메서드에 접근이 가능합니다

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