Differences

This shows you the differences between two versions of the page.

--- java-script:multiple-inheritance [2023/07/26 15:56] – odefta
+++ java-script:multiple-inheritance [2025/01/02 18:22] (current) – external edit 127.0.0.1
@@ Line 12: / Line 12: @@
 ===== Java Script Mixins =====
-A **mixin** is a class whose methods are intended to be added to (or "mixed in" to) other classes.
+==== Mixins using class syntax ====
+::A **mixin** is a class whose methods are intended to be added to (or "mixed in" to) other classes.:: \\
+AnimalMixin is a function that takes a base class and returns a new class that extends the base class and adds the eats method. \\ ;;;Then Employee extends AnimalMixin(Person) - effectively combining Person and Animal.;;; \\ Also, note that super refers to the parent class, so calling super.description() in Employee will call description on Person, not Animal.
+Example:
+<code javascript Person.js>
+class Person {
+    constructor(name, age) {
+        this.name = name;
+        this.age = age;
+    }
+    description() {
+        return `A person named ${this.name} who is ${this.age} years old`;
+    }
+}
+const AnimalMixin = Base => class extends Base {
+    eats() {
+        return `${this.name} eats like an animal.`;
+    }
+};
+class Employee extends AnimalMixin(Person) {
+    constructor(name, age, salary, jobTitle) {
+        super(name, age);
+        this.salary = salary;
+        this.jobTitle = jobTitle;
+    }
+    description() {
+        return `An employee is also ${super.description()}`;
+    }
+}
+let employee = new Employee("Aurel", 30, 15000, "CEO boss");
+console.log(employee.eats()); // Aurel eats.
+console.log(employee.description()); // An employee is also A person named Aurel who is 30 years old
+</code>
+<note warning>
+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.
+</note>
+==== 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, age, salary, jobTitle) {
+        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, AnimalMixin);
+let employee = new Employee("Aurel", 30, 15000, "CEO boss");
+console.log(employee.eats()); // Aurel eats.
+</code>
+<note>
+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/methods.
+</note>
+<note>
+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.
+</note>