Composition Pattern in Javascript with Classes but without Mixins?

Question

Is the following a valid strategy for implementing the composition pattern in Javascript? I want to use classes instead of constructor functions or plain objects, and I know that Mixins are not best practice. One concern is that in this approach, the methods added to Person objects are not attached to the prototype and therefore each require memory allocation. Thanks!

class Person {
  name;
  constructor(name) {
    this.name = name;
  }
}

function fly() {
  return {
    fly() {
      console.log(`${this.name} can fly!`);
    },
  };
}

function swim() {
  return {
    swim() {
      console.log(`${this.name} can swim!`);
    },
  };
}

function makeFlyingPerson(name) {
  return Object.assign(new Person(name), fly());
}

function makeSwimmingPerson(name) {
  return Object.assign(new Person(name), swim());
}

Answer 1

...the methods added to Person objects are not attached to the prototype and therefore each require memory allocation

True, but it's a trivial amount, the cost of one property per method per object (to hold the function reference for the method). Properties aren't nothing, but they aren't large. For the avoidance of doubt: The function object is reused by all instances, not copied.

There's no reason for fly and swim to be functions, though (at least, none that's apparent from the question), just use the objects directly:

class Person {
    name;
    constructor(name) {
        this.name = name;
    }
}

const flyMethods = {
    fly() {
        console.log(`${this.name} can fly!`);
    },
};

const swimMethods = {
    swim() {
        console.log(`${this.name} can swim!`);
    },
};

function makeFlyingPerson(name) {
    return Object.assign(new Person(name), flyMethods);
}

function makeSwimmingPerson(name) {
    return Object.assign(new Person(name), swimMethods);
}

Note that this is still using mixins, though (both your original and the above).

Unless you're going to reuse fly/flyMethods and swim/swimMethods with other classes than Person, though, using extends would seem simpler and would give you prototypical method reuse:

class FlyingPerson extends Person {
    fly() {
        // ...
    }
}

---

If you are reusing fly/flyMethods, etc., with multiple classes, another option is to have factory-building functions that create a prototype from the various sets of methods and then reuse it:

class Person {
    name;
    constructor(name) {
        this.name = name;
    }
}

const flyMethods = {
    fly() {
        console.log(`${this.name} can fly!`);
    },
};

const swimMethods = {
    swim() {
        console.log(`${this.name} can swim!`);
    },
};

function extendWith(cls, name, ...mixins) {
    // We use the wrapper object so that the class constructor's name is assigned from `name`
    const obj = {
        [name]: class extends cls {
        }
    };
    Object.assign(obj[name].prototype, ...mixins);
    return obj[name];
}

const FlyingPerson = extendWith(Person, "FlyingPerson", flyMethods);
const SwimmingPerson = extendWith(Person, "SwimmingPerson", swimMethods);
const FlyingSwimmingPerson = extendWith(Person, "FlyingSwimmingPerson", flyMethods, swimMethods);

const joe = new FlyingSwimmingPerson("Joe");
joe.fly();
joe.swim();

class Animal {
    name;
    type;
    constructor(name, type) {
        this.name = name;
        this.type = type;
    }
}

const FlyingSwimmingAnimal = extendWith(Animal, "FlyingSwimmingAnimal", flyMethods, swimMethods);

console.log(FlyingSwimmingAnimal.name); // FlyingSwimmingAnimal
const splippery = new FlyingSwimmingAnimal("Slippery");
splippery.fly();
splippery.swim();