Skip to content

Update article.md #306

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 1 commit into from
Nov 27, 2017
Merged
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
18 changes: 9 additions & 9 deletions 1-js/07-object-oriented-programming/13-mixins/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

In JavaScript we can only inherit from a single object. There can be only one `[[Prototype]]` for an object. And a class may extend only one other class.

But sometimes that feels limiting. For instance, I have a class `StreetSweeper` and a class `Bycicle`, and want to make a `StreetSweepingBycicle`.
But sometimes that feels limiting. For instance, I have a class `StreetSweeper` and a class `Bicycle`, and want to make a `StreetSweepingBicycle`.

Or, talking about programming, we have a class `Renderer` that implements templating and a class `EventEmitter` that implements event handling, and want to merge these functionalities together with a class `Page`, to make a page that can use templates and emit events.

Expand All @@ -24,10 +24,10 @@ For instance here the mixin `sayHiMixin` is used to add some "speech" for `User`
*/!*
let sayHiMixin = {
sayHi() {
alert("Hello " + this.name);
alert(`Hello ${this.name}`);
},
sayBye() {
alert("Bye " + this.name);
alert(`Bye ${this.name}`);
}
};

Expand All @@ -44,7 +44,7 @@ class User {
Object.assign(User.prototype, sayHiMixin);

// now User can say hi
new User("Dude").sayHi(); // Hi Dude!
new User("Dude").sayHi(); // Hello Dude!
```

There's no inheritance, but a simple method copying. So `User` may extend some other class and also include the mixin to "mix-in" the additional methods, like this:
Expand Down Expand Up @@ -75,10 +75,10 @@ let sayHiMixin = {
*!*
// call parent method
*/!*
super.say("Hello " + this.name);
super.say(`Hello ${this.name}`);
},
sayBye() {
super.say("Bye " + this.name);
super.say(`Bye ${this.name}`);
}
};

Expand Down Expand Up @@ -138,8 +138,8 @@ let eventMixin = {
off(eventName, handler) {
let handlers = this._eventHandlers && this._eventHandlers[eventName];
if (!handlers) return;
for(let i = 0; i < handlers.length; i++) {
if (handlers[i] == handler) {
for (let i = 0; i < handlers.length; i++) {
if (handlers[i] === handler) {
handlers.splice(i--, 1);
}
}
Expand Down Expand Up @@ -183,7 +183,7 @@ let menu = new Menu();

// call the handler on selection:
*!*
menu.on("select", value => alert("Value selected: " + value));
menu.on("select", value => alert(`Value selected: ${value}`));
*/!*

// triggers the event => shows Value selected: 123
Expand Down