在 JS 的一组构造函数中解构参数

Question

我怎样才能 1) 将原型道具从父构造函数传递给子构造函数，2) 使用解构来组织我所有构造函数的参数，而不会导致类型错误？

这是我要修复的代码：

function Participant ({gender, age, tastes, education}){
  this.gender = gender;
  this.age = age; 
  this.tastes = tastes || [];
  this.education = education || 0;
}

function Payer(gender, age, tastes, education, income, job){
  this.base = Participant;
  this.base(gender, age, tastes, education); 
  this.income = income;
  this.job = job || 'merchant';
}
Payer.prototype = new Participant;

function NotPayer({gender, age, tastes, role}){
  this.role = role || 'kid';
  this.base = Participant;
  this.job = 'Not Valid';
  this.base(gender, age, tastes);
}
NotPayer.prototype = new Payer;

const kid1 = new NotPayer({role: 'nephew', age: 6, gender: 'male', tastes: ['ps4', 'golf']});
kid1.role;// 'nephew'
const kid2 = new Participant({gender: 'female'});
kid2.gender; // Type Error: Cannot destructure property 'gender' of 'undefined'

我试图修复的是：


function Participant ({gender, age, tastes, education}){
  this.gender = gender;
  this.age = age; 
  this.tastes = tastes || [];
  this.education = education || 0;
}

function Payer(gender, age, tastes, education, income, job){
  this.base = Participant;
  this.base(gender, age, tastes, education);
  this.income = income;
  this.job = job || 'merchant';
}
//Payer.prototype = new Participant;

function NotPayer({gender, age, tastes, role}){
  this.role = role || 'kid';
  this.base = Participant;
  this.job = 'Not Valid';
  this.base(gender, age, tastes);
}
//NotPayer.prototype = new Payer;

const kid1 = new NotPayer({role: 'nephew', age: 6, gender: 'male', tastes: ['ps4', 'golf']});
console.log(kid1.role); // nephew
const kid2 = new Participant({gender: 'female'});
console.log(kid2.gender); // female

它起作用只是因为我评论了将父构造函数分配给子构造函数的表达式（因此，例如，kid1.gender 变成了 undefined）

注意代码设法同时使用父原型继承和参数解构，仅在以下情况下（仅在最后一个构造函数子中使用解构时）：

function Participant (gender, age, tastes, education){
  this.gender = gender;
  this.age = age; 
  this.tastes = tastes || [];
  this.education = education || 0;
}
function NotPayer({gender, age, tastes, role}){
  this.role = role || 'kid';
  this.base = Participant;
  this.job = 'Not Valid';
  this.base(gender, age, tastes);//check education
}
NotPayer.prototype = new Participant;

const kid1 = new NotPayer({role: 'nephew', age: 6, gender: 'male', tastes: ['ps4', 'golf']});
console.log(kid1.gender); // male

console.log(NotPayer.prototype); // Participant{...}

谢谢！！对这个问题的范围感到抱歉。

Answer 1

试试这个

class Participant {
  constructor(gender, age, tastes, education) {
    this.gender = gender;
    this.age = age;
    this.tastes = tastes || [];
    this.education = education || 0;
  }
}

class NotPayer extends Participant {
  constructor({gender, age, tastes, role}) {
    super(gender, age, tastes)
    this.role = role || 'kid';
    this.job = 'Not Valid';
  }
}

const kid1 = new NotPayer({role: 'nephew', age: 6, gender: 'male', tastes: ['ps4', 'golf']});
console.log(kid1.gender)

console.log(NotPayer.prototype)

在 JS 的一组构造函数中解构参数

destructuring arguments in a group of constructors in JS

javascript

constructor

prototype

destructuring