Skip to content
Related Articles

Related Articles

What are the class compositions in JavaScript ?
  • Last Updated : 24 Jun, 2020
GeeksforGeeks - Summer Carnival Banner

Composition helps in creating large & complex functions by combining small functions. For example, you can build a wall with the help of small bricks. The example of brick may be treated as a function, and composition is all about how we are combining those bricks to make a wall. The Class composition provides us an easy way of composition, including the benefits of composition with Object-Oriented Programming.

You can compose classes and objects. A class may be considered as a “blueprint” for an object, which is an entity that has relevant functions and data (methods and state). It can be used to create many objects depending on the need.

Properties will be added to objects without using inheritance by using the mixin concept. Different object’s properties are mixed into a single object, so the object has all the object’s properties and methods. In other words, a mixin is a way that gives methods that implement a certain behavior. It is used to add the behavior of other classes.

Note: The mixin technique defines some part of behavior, which consists of a factory function which takes a superclass as its argument and returns the respective subclass.

Example: Create a mixin class and by using it develop a “Human” class example.




// Create a mixin class
const MixFood = superclass => class extends superclass {
    eating(food) {
        console.log(`Eating ${food}`);
    }
  
    excrete() {
        console.log("Going to excrete");
    }
};
  
// Develop the "Child" example by 
// enhancing the "Human" class 
class Human {
    constructor(name) {
        this.name = name
    }
}
  
class Child extends MixFood(Human) {
    constructor(...args) {
        super(...args)
    }
  
    cry() {
        console.log("Woff woff!")
    }
  
    lunch(food) {
        this.eating(food);
        this.excrete();
    }
}
  
const john = new Child("jack");
john.lunch("biscuits");

Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :