Mixins as subclass factories
Each mixin is a function from a class to a new subclass, so they stack: User → events → timestamps → Model. ??= (ES2021) creates the list the first time.
Instead of building tall family trees of classes, build objects from small parts: an object has an engine rather than is an engine, borrows abilities through mixins, or hands work to a helper (delegation); and when there is no shared behaviour to organise, a plain object and a few functions beat a class.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write factories withName(name) and withGreeting(state) and combine them into createPerson("Asha") so that person.greet() returns "Hello, I am Asha", without class or this.
Write a class Logger that has a writer (any object with write(text)), and a method info(msg) that calls writer.write("[info] " + msg). Use a writer that pushes into an array, and print the array after two calls.
Write a subclass-factory mixin WithCount that adds a count field and an increment() method, apply it to an empty class Base {}, and show two instances counting separately.
Explain it without notes
What does "favour composition over inheritance" mean, and why is it good advice?
What is delegation, and how does duck typing make it flexible?
What are mixins in JavaScript? Compare Object.assign mixins with subclass factories.
When is a class overkill, and when is it the right tool?
Preview
Console
Nothing logged yet.Expected console output
changed to Asha K
User { name: 'Asha K', updatedAt: '2024-01-15T10:30:00.000Z' }
true function function