java-script:multiple-inheritance
Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| java-script:multiple-inheritance [2023/07/26 16:18] – odefta | java-script:multiple-inheritance [2025/01/02 18:22] (current) – external edit 127.0.0.1 | ||
|---|---|---|---|
| Line 11: | Line 11: | ||
| ===== Java Script Mixins ===== | ===== Java Script Mixins ===== | ||
| + | |||
| + | ==== Mixins using class syntax ==== | ||
| ::A **mixin** is a class whose methods are intended to be added to (or "mixed in" to) other classes.:: \\ | ::A **mixin** is a class whose methods are intended to be added to (or "mixed in" to) other classes.:: \\ | ||
| Line 26: | Line 28: | ||
| description() { | description() { | ||
| return `A person named ${this.name} who is ${this.age} years old`; | return `A person named ${this.name} who is ${this.age} years old`; | ||
| - | } | ||
| - | } | ||
| - | |||
| - | class Animal { | ||
| - | eats() { | ||
| - | return `${this.name} eats.`; | ||
| } | } | ||
| } | } | ||
| Line 37: | Line 33: | ||
| const AnimalMixin = Base => class extends Base { | const AnimalMixin = Base => class extends Base { | ||
| eats() { | eats() { | ||
| - | return `${this.name} eats.`; | + | return `${this.name} eats like an animal.`; |
| } | } | ||
| }; | }; | ||
| Line 61: | Line 57: | ||
| While mixins can be useful for sharing behavior between classes, they should be used sparingly as they can make code more complex and harder to follow. | While mixins can be useful for sharing behavior between classes, they should be used sparingly as they can make code more complex and harder to follow. | ||
| </ | </ | ||
| + | |||
| + | ==== Mixins using Object.assign ==== | ||
| + | |||
| + | Same functionality can be achieved using **Object.assign** approach. \\ | ||
| + | ;;;In this case, we're directly adding the methods from AnimalMixin to the prototype of Employee class using Object.assign(). This way, all instances of Employee will have access to the eats method.;;; | ||
| + | |||
| + | <code javascript Person.js> | ||
| + | let AnimalMixin = { | ||
| + | eats() { | ||
| + | return `${this.name} eats.`; | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | class Employee { | ||
| + | constructor(name, | ||
| + | this.name = name; | ||
| + | this.age = age; | ||
| + | this.salary = salary; | ||
| + | this.jobTitle = jobTitle; | ||
| + | } | ||
| + | |||
| + | description() { | ||
| + | return `A person named ${this.name} who is ${this.age} years old`; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | Object.assign(Employee.prototype, | ||
| + | |||
| + | let employee = new Employee(" | ||
| + | console.log(employee.eats()); | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | Using class syntax can be more straightforward if you're already working with classes and want to take advantage of built-in class features like super calls and static properties/ | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | On the other hand, Object.assign() can be more flexible and dynamic, since it allows you to copy methods onto any object, not just class prototypes. | ||
| + | </ | ||
| + | |||
| + | |||
| + | |||
| + | |||
java-script/multiple-inheritance.1690388308.txt.gz · Last modified: (external edit)
