如何解构对象并将结果作为参数传递给类构造函数？

Question

class Cat {
  constructor(words, feet) {
    //this.meow(words);
    this.words = words;
    this.feet = feet;
  }
  meow() {
    console.log(`meow${this.words}${this.feet}`);
  }
}

class Tiger {
  constructor(words) {
    this.words = words;
    //this.rowr(words);
  }
  rowr() {
    console.log(`rowr${this.words}`);
  }
}
const param = {
  words: 'abc',
  feet: 2,
}
const cat = new Cat(...param);
console.log(cat.meow())

I got meowundefinedundefined

Why is that? Note that I have es6 babel enabled.

Answer 1

You are trying to spread an object into the params. You can only spread an object into another object. To destructure it use curly braces in the constructor definition.

Note: object rest/spread is still a stage 3 proposal , and requires a babel transform to work.

 class Cat { constructor({ words, feet }) { // destructure the object //this.meow(words); this.words = words; this.feet = feet; } meow() { console.log(`meow${this.words}${this.feet}`); } } class Tiger { constructor(words) { this.words = words; //this.rowr(words); } rowr() { console.log(`rowr${this.words}`); } } const param = { words: 'abc', feet: 2, } const cat = new Cat(param); cat.meow() // meow doesn't return anything, so console.log it will give you undefined 

Another option is to destructure it outside, and then assign it to the constructor:

 class Cat { constructor(words, feet) { //this.meow(words); this.words = words; this.feet = feet; } meow() { console.log(`meow${this.words}${this.feet}`); } } class Tiger { constructor(words) { this.words = words; //this.rowr(words); } rowr() { console.log(`rowr${this.words}`); } } const { words, feet } = { words: 'abc', feet: 2, } const cat = new Cat(words, feet); cat.meow() // meow doesn't return anything, so console.log it will give you undefined 

Answer 2

You can't destructure an object like that to fill params for a method. you should rather try destructuring an array to pass to the constructor or change the constructor to receive an object instead. words and feet are undefined because they never get passed to the constructure as you would expect.

 class Cat { constructor(words, feet) { //this.meow(words); this.words = words; this.feet = feet; } meow() { console.log(`meow${this.words}${this.feet}`); } } class Tiger { constructor(words) { this.words = words; //this.rowr(words); } rowr() { console.log(`rowr${this.words}`); } } const p = ['abc', 2]; const icat = new Cat(...p); //right icat.meow(); // meowabc2 

Checkout this codepen .

Answer 3

Try spreading an array items. Eg:

const words = 'abc';
const feet = 2;
const param = [
    words,
    feet
];