Differences

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

--- java-script:multiple-inheritance [2023/07/26 19:06] – odefta
+++ java-script:multiple-inheritance [2023/07/26 19:39] (current) – odefta
@@ 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:
@@ Line 25: / Line 28: @@
     description() {
         return `A person named ${this.name} who is ${this.age} years old`;
-    }
-}
-class Animal {
-    eats() {
-        return `${this.name} eats.`;
     }
 }
@@ Line 36: / Line 33: @@
 const AnimalMixin = Base => class extends Base {
     eats() {
-        return `${this.name} eats.`;
+        return `${this.name} eats like an animal.`;
     }
 };
@@ Line 57: / Line 54: @@
 </code>
-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. \\
+<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>
-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. Also, note that super refers to the parent class, so calling super.description() in Employee will call description on Person, not Animal.