javascript - Set attributes to a class from constructor parameters in a clean way - Stack Overflow

admin管理员组

文章数量:1399944

I have this code for a class that receives some parameters, and I'm assigning them as object properties once each time.

class InitAnimation {
  constructor(settingsAnimation, settingButton, isHelp, isEnd) {
    // Initialized the configuration for  main animation.
    this.settingsAnimation = settingsAnimation;
    this.settingButton = settingButton;
    this.yes = null;
    this.no = null;
    this.isHelp = isHelp;
    this.isEnd = isEnd;
    this.initConfig();
  }

Is there a cleaner way to do this in ES6, in which I just can take the arguments key-values and assign them to the object as puted property names? Something like:

class InitAnimation {
  constructor(settingsAnimation, settingButton, isHelp, isEnd) {
    // Initialized the configuration for  main animation.
    // I know this doesn't work on 'arguments'
    arguments.forEach(key => this[key] = arguments[key]);
    this.initConfig();
}

For this case I can't modify the way parameters are sent because that would imply changing everyone else's code and the project is kinda big right now. Can I do this in a better way without changing how parameters are passed?

I have this code for a class that receives some parameters, and I'm assigning them as object properties once each time.

class InitAnimation {
  constructor(settingsAnimation, settingButton, isHelp, isEnd) {
    // Initialized the configuration for  main animation.
    this.settingsAnimation = settingsAnimation;
    this.settingButton = settingButton;
    this.yes = null;
    this.no = null;
    this.isHelp = isHelp;
    this.isEnd = isEnd;
    this.initConfig();
  }

Is there a cleaner way to do this in ES6, in which I just can take the arguments key-values and assign them to the object as puted property names? Something like:

class InitAnimation {
  constructor(settingsAnimation, settingButton, isHelp, isEnd) {
    // Initialized the configuration for  main animation.
    // I know this doesn't work on 'arguments'
    arguments.forEach(key => this[key] = arguments[key]);
    this.initConfig();
}

For this case I can't modify the way parameters are sent because that would imply changing everyone else's code and the project is kinda big right now. Can I do this in a better way without changing how parameters are passed?

• javascript
• ecmascript-6

Share Improve this question Follow asked Sep 22, 2017 at 12:40 Julián BonillaJulián Bonilla 38511 gold badge55 silver badges1818 bronze badges 1

• Object.assign() – Pointy Commented Sep 22, 2017 at 12:41

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

Yes, in ES2015+ you can use Object.assign and shorthand properties:

constructor(settingsAnimation, settingButton, isHelp, isEnd) {
  // Initialized the configuration for  main animation.
  Object.assign(this, {settingsAnimation, settingButton, isHelp, isEnd});
  this.yes = null;
  this.no = null;
  this.initConfig();
}

Live Example:

class InitAnimation {
    constructor(settingsAnimation, settingButton, isHelp, isEnd) {
      // Initialized the configuration for  main animation.
      Object.assign(this, {settingsAnimation, settingButton, isHelp, isEnd});
      this.yes = null;
      this.no = null;
      this.initConfig();
    }
    initConfig() {
    }
}
const a = new InitAnimation("a", "b", "c", "d");
console.log(a);

There are several options here.

Object literal can be used to assign properties. This results in copying and pasting parameters in order to enumerate them explicitly but results in more solid code and function signature that can be statically analyzed:

  constructor(foo, bar) {
    Object.assign(this, { foo, bar });
    ...
  }

Arguments can be processed according to parameter list. This results in parameter list that is enumerated once, but function signature is loose, it cannot be statically analyzed and is prone to human errors:

  constructor(...args) {
    ['foo', 'bar']
    .forEach((paramName, i) => {
      this[paramName] = args[i];
    });
  }

It should be noticed that this is efficiently solved in TypeScript with parameter properties and is one of the reasons why it can be chosen over vanilla JavaScript:

constructor(public foo) {}

is syntactic sugar for

constructor(foo) {
  this.foo = foo;
}

You can detect the names of a function's arguments using this technique:

https://davidwalsh.name/javascript-arguments

So you could apply that to your constructor, then use a loop to match up the argument names with their values (by index) and then apply them to an object.

function argumentsToObject( func, args ) {
   const argNames = getArgumentNames( func ); //use the code from the above link to do this
   const resultObject = {};
   argsNames.forEach( ( argName, index ) => {
      var argValue = args[index];
      resultObject[ argName ] = argValue;
   });
}

Then in your constructor, do

const argsObject = argumentsToObject( InitAnimation.prototype.constructor, arguments );
//copy all the arguments onto this
Object.assign( this, argsObject );

Given constructor options are wrapped in an object, which I personally prefer not to mess up the arguments order:

const pet = new Feline({breed, age, sex})

you can easily assign them inside the class:

class Feline {
    constructor(args) {
        Object.assign(this, args)
    }
    ...
  }

Typescript and intellisence will likely hate it, but in an environment without TS it's quick and dirty fix to pass as much stuff as you need inside a class.

本文标签： javascriptSet attributes to a class from constructor parameters in a clean wayStack Overflow