Skip to content

Class inheritance #74

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

Merged
merged 2 commits into from
Aug 26, 2019
Merged
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()`.
C'est parce que le constructeur de l'enfant doit appeler `super()`.

Here's the corrected code:
Voici le code corrigé:

```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"); // OK maintenant
*/!*
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
# Erreur lors de la création d'une instance

Here's the code with `Rabbit` extending `Animal`.
Voici le code avec `Rabbit` étendant` Animal`.

Unfortunately, `Rabbit` objects can't be created. What's wrong? Fix it.
Malheureusement, des objets `Rabbit` ne peuvent pas être créés. Qu'est-ce qui ne va pas? Répare le.
```js run
class Animal {

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
clock.start();


/* Your class should work like this: */
/* Votre classe devrait fonctionner comme ceci: */

/*

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

---

# Extended clock
# Horloge étendue

We've got a `Clock` class. As of now, it prints the time every second.
Nous avons une classe `Clock`. À partir de maintenant, il affiche l'heure à chaque seconde.


[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.
Créez une nouvelle classe `ExtendedClock` qui hérite de `Clock` et ajoute le paramètre `precision` - le nombre de `ms` entre "ticks". Devrait être `1000` (1 seconde) par défaut.

- Your code should be in the file `extended-clock.js`
- Don't modify the original `clock.js`. Extend it.
- Votre code devrait être dans le fichier `extended-clock.js`
- Ne modifiez pas le fichier `clock.js` d'origine. Étendez-le.
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.
Voyons d'abord pourquoi ce dernier code ne fonctionne pas.

The reason becomes obvious if we try to run it. An inheriting class constructor must call `super()`. Otherwise `"this"` won't be "defined".
La raison devient évidente si nous essayons de l'exécuter. Un constructeur de classe héritant doit appeler `super()`. Sinon `"this"` ne sera pas "défini".

So here's the fix:
Alors, voici la solution:

```js run
class Rabbit extends Object {
constructor(name) {
*!*
super(); // need to call the parent constructor when inheriting
super(); // besoin d'appeler le constructeur parent lors de l'héritage
*/!*
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.
Mais ce n'est pas tout.

Even after the fix, there's still important difference in `"class Rabbit extends Object"` versus `class Rabbit`.
Même après le correctif, il existe toujours une différence importante entre `"class Rabbit extends Object"` et `class Rabbit`.

As we know, the "extends" syntax sets up two prototypes:
Comme on le sait, la syntaxe "extend" configure deux prototypes:

1. Between `"prototype"` of the constructor functions (for methods).
2. Between the constructor functions itself (for static methods).
1. Entre le `"prototype"` des fonctions du constructeur (pour les méthodes).
2. Entre les fonctions du constructeur lui-même (pour les méthodes statiques).

In our case, for `class Rabbit extends Object` it means:
Dans notre cas, pour `class Rabbit extends Object`, cela signifie:

```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:
Donc `Rabbit` donne maintenant accès aux méthodes statiques de `Object` via `Rabbit`, comme ceci:

```js run
class Rabbit extends Object {}

*!*
// normally we call Object.getOwnPropertyNames
// normalement nous appelons 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`.
Mais si nous n’avons pas `extends Object`, alors `Rabbit.__proto__` n'est pas défini sur `Object`.

Here's the demo:
Voici la démo:

```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.__proto__ === Function.prototype ); // comme toute fonction par défaut

*!*
// error, no such function in Rabbit
alert ( Rabbit.getOwnPropertyNames({a: 1, b: 2})); // Error
*/!*
```

So `Rabbit` doesn't provide access to static methods of `Object` in that case.
Donc, `Rabbit` ne donne pas accès aux méthodes statiques de `Object` dans ce cas.

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`.
En passant, `Function.prototype` a des méthodes de fonction "génériques", comme `call`, `bind`, etc. Elles sont finalement disponibles dans les deux cas, car pour le constructeur `Object` intégré, `Object.__proto__ === Function.prototype`.

Here's the picture:
Voici l'image:

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

So, to put it short, there are two differences:
Donc, pour faire court, il y a deux différences:

| class Rabbit | class Rabbit extends Object |
|--------------|------------------------------|
| -- | needs to call `super()` in constructor |
| -- | doit appeler `super()` dans le constructeur |
| `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?
# Classe étend l'objet?

As we know, all objects normally inherit from `Object.prototype` and get access to "generic" object methods like `hasOwnProperty` etc.
Comme nous le savons, tous les objets héritent normalement de `Object.prototype` et ont accès à des méthodes d'objet "génériques" comme `hasOwnProperty` etc.

For instance:
Par exemple:

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

*!*
// hasOwnProperty method is from Object.prototype
// la méthode hasOwnProperty est de Object.prototype
// rabbit.__proto__ === 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"`?
Mais si nous l’épelons explicitement comme suit: `"class Rabbit extends Object"`, le résultat serait alors différent d´un simple `"class Rabbit"`?

What's the difference?
Quelle est la différence?

Here's an example of such code (it doesn't work -- why? fix it?):
Voici un exemple d'un tel code (cela ne fonctionne pas - pourquoi? Réparez le?):

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