Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

112
Visualizações
Composition Pattern in Javascript with Classes but without Mixins?

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());
}
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

...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();

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda