Javascript，添加构造函数的类

Question

我对 js + ES6 + class 有点陌生；我在构造函数中创建函数时遇到问题。

#1. I need to add new Hobby, a person allowed to have plenty hobbies ;
#2. I don't know how to show all the data of students;

其他问题在comments 中，如果你也想回答，如果不是我也可以。 所以这是我的代码：

class Student {
  constructor(name,hobbies){

    this.name = name;

    var hobby = new Set(); //do I set here or inside the function ??
 //since the function addHobbies also need, then it's fine to be global right ?


    this.hobbies = (hobbies) => {    //function ES6 like this right ??

      this.hobbies = hobby.add(hobbies);

      return this.hobbies;  //can I return hobby instead of this.hobbies ??
    };
  }
  setName(newName){
    this.name = newName;
  }

  addHobbies(newHobbies){
    this.Hobbies = hobby.add(newHobbies); //it should be like this to add >> to set ?
  }


  getName(){
    return this.name;
  }

  getHobbies(){
    return this.hobbies;
  }
}

以及如何返回所有数据？

let andy = new Student("andy","dance");
let vince = new Student("vince","codding");

所以它会以getCode() 显示所有学生属性？

Answer 1

我是在此处设置还是在函数内部设置？？

这取决于你需要什么。您是希望每个Student 拥有一套爱好，还是希望每次调用函数时都创建一个新的爱好？

this.hobbies = (hobbies) => {    //function ES6 like this right ??
    this.hobbies = hobby.add(hobbies);

这根本行不通。您正在使用函数值创建属性，但是当调用该方法时，您将使用 add method 的返回值覆盖该属性。

---

为了使其正常工作，我建议将 .hobbies 设置为 instance property instead of a local variable。

class Student {
  constructor(name, ...hobbies) {
    this.name = name;
    this.hobbies = new Set();
    this.addHobbies(...hobbies);
  }

  getName() {
    return this.name;
  }
  setName(newName) {
    this.name = newName;
  }

  getHobbies() {
    return this.hobbies;
  }
  addHobbies(...newHobbies) {
    for (const newHobby of newHobbies)
      this.hobbies.add(newHobby);
  }
}

或者，如果你坚持使用局部构造函数变量，它看起来像这样：

class Student {
  constructor(name, ...hobbies) {
    this.name = name;
    this.hobbies = new Set(...hobbies);

    this.getHobbies = () => {
      return this.hobbies;
    };
    this.addHobbies = (...newHobbies) => {
      for (const newHobby of newHobbies)
        this.hobbies.add(newHobby);
    };
  }

  … // further methods (for name etc)
}

Answer 2

试试这个：

class Student {
  constructor(name, hobbies) {
    this.name = name;

    // Allow passing both an array of hobbies and a single hobby
    this.hobbies = Array.isArray(hobbies) ? new Set(hobbies) : new Set([hobbies]);
  }

  setName(newName) {
    this.name = newName;
  }

  addHobbies(newHobbies) {
      if (Array.isArray(newHobbies)) {
          newHobbies.forEach((hobby) => this.hobbies.add(hobby));
      } else {
          this.hobbies.add(newHobbies);
      }
  }

  getName() {
    return this.name;
  }

  getHobbies() {
    return this.hobbies;
  }
}

let andy = new Student("andy","dancing");
let vince = new Student("vince",["codding", "running"]);
andy.addHobbies("slipping");
vince.addHobbies(["running", "eating"]);

Answer 3

你的方向是正确的。我已经重写了您的课程，以做我认为与您想要实现的目标更相似的事情。

玩代码：https://jsbin.com/vejumo/edit?js,console

这是重写的类：

class Student {
  constructor(name, hobbies = []){

    this.name = name;

    // new Set() is used to work with objects. It does not work with well with strings
    // Let's use an array to store the hobbies.
    // if a hobby or an hobbies array is passed, store it, otherwise set an empty array.
    this.hobbies = this.parseHobbies(hobbies); 
  }

  // This function will normalize the hobbies to an Array
  parseHobbies(hobbies) {
    if (typeof hobbies === "string") {
      // hobbies is a string, means it's a single hobby and not an array
      return [hobbies];
    }
    // Assuming the hobbies is a an Array
    return hobbies; 
  }

  setName(newName) {
    this.name = newName;
  }

  // this function will allow you to add a single hobby to the array
  addHobbies(hobbies = []) {
    // Same logic like in constract, this can accept a string or an array
    // We use Array.concat and push to append to array
    this.hobbies = this.hobbies.concat(this.parseHobbies(hobbies)); 
  }

  getName() {
    return this.name;
  }

  getHobbies() {
    return this.hobbies
  }

  // This will return all student attributes.
  getAttributes() {
    // Return a copy of all the attributes instead of returning references
    return Object.assign({}, this);
  }
}

let george = new Student("George", "Sports");
george.addHobbies(["Singing", "Fishing"]);
george.addHobbies("Dancing");
console.log(george.getAttributes());