如何解构对象并传入类构造函数？为何出现meowundefinedundefined（启用ES6 Babel）

这事儿其实挺简单的，有两种常用的实现方式，咱一个个说：

方式一：构造函数参数直接解构 #

最简洁的写法就是直接在构造函数的参数列表里对传入的对象做解构，省得再单独处理整个对象：

class Cat {
  constructor({ name, age, breed }) {
    // 把解构出来的属性直接绑定到实例上
    this.name = name;
    this.age = age;
    this.breed = breed;
  }

  meow() {
    console.log(`Meow, I'm ${this.name}, a ${this.age}-year-old ${this.breed}`);
  }
}

// 实例化时直接传包含属性的对象
const myCat = new Cat({ name: 'Mittens', age: 3, breed: 'Persian' });
myCat.meow(); // 输出: Meow, I'm Mittens, a 3-year-old Persian

方式二：先接收对象，再内部解构 #

如果需要加默认值或者处理额外逻辑，也可以先把整个对象传进来，再在构造函数内部解构：

class Cat {
  constructor(catData) {
    // 解构时给属性加默认值，就算传入的对象缺属性也不会出undefined
    const { name = '无名氏', age = 1, breed = '混血猫' } = catData;
    this.name = name;
    this.age = age;
    this.breed = breed;
  }

  meow() {
    console.log(`Meow, I'm ${this.name}, a ${this.age}-year-old ${this.breed}`);
  }
}

// 只传name属性，剩下的用默认值
const myCat = new Cat({ name: 'Whiskers' });
myCat.meow(); // 输出: Meow, I'm Whiskers, a 1-year-old 混血猫

出现这种输出，说白了就是你的类实例里对应的属性没拿到正确的值，全是undefined。大概率是踩了这几个坑：

• 属性名不匹配：你传入的对象属性名和解构时用的名字不一样，导致解构出来的属性是undefined。比如下面这个反例：

class Cat {
  constructor({ name, age }) {
    this.name = name;
    this.age = age;
  }

  meow() {
    console.log(`meow${this.name}${this.age}`);
  }
}

// 传入的是catName和catAge，但解构用的是name和age，自然拿不到值
const myCat = new Cat({ catName: 'Mittens', catAge: 2 });
myCat.meow(); // 输出: meowundefinedundefined

• 解构后没绑定到实例：只做了解构，但没把解构出来的属性赋值给this，导致实例上根本没有这些属性：

class Cat {
  constructor(catData) {
    // 只解构了但没赋值给this，相当于白解构了
    const { name, age } = catData;
  }

  meow() {
    console.log(`meow${this.name}${this.age}`);
  }
}

const myCat = new Cat({ name: 'Mittens', age: 2 });
myCat.meow(); // 输出: meowundefinedundefined

• 传入的对象为空或没传对象：如果构造函数期望解构对象，但你传了空对象或者干脆没传参数，那解构出来的属性自然都是undefined（如果没设默认值的话）：

// 传空对象的情况
const myCat = new Cat({});
myCat.meow(); // 输出: meowundefinedundefined

解决办法也很直接：检查传入对象的属性名是否和解构的名字一致，确保解构后把属性赋值给this，或者给解构的属性加上默认值，就算缺属性也能有合理的 fallback 值。

内容的提问来源于stack exchange，提问作者ey dee ey em