如何在JavaScript中为类添加多个属性并实现实例属性取值方法

问题根因 #

你当前编写的getDetails()方法存在逻辑错误：函数执行过程中只要遇到第一个return语句就会直接终止运行，因此你写的后两行返回年龄、职业的代码永远不会触发，调用该方法只能拿到姓名属性。

修复方案 #

方案1：返回格式化拼接的详情字符串（适合直接渲染到页面）

修改后的JS代码如下：

function Person(name, age, occupation) {
  this.name = name;
  this.age = age;
  this.occupation = occupation;
}
Person.prototype.getDetails = function () {
  // 按需调整你想要展示的格式即可
  return `姓名：${this.name}，年龄：${this.age}，职业：${this.occupation}`;
};
var john = new Person("John Doe", "32", "Web Developer");

document
  .getElementById('demo')
  .innerText = john.getDetails();

HTML代码无需改动，运行后页面会直接展示拼接好的完整人员信息。

方案2：返回属性对象（适合后续需要单独取用各属性的场景）

如果后续你需要单独获取某一个属性值，可以修改getDetails()返回所有属性组成的对象：

Person.prototype.getDetails = function () {
  return {
    name: this.name,
    age: this.age,
    occupation: this.occupation
  }
};
// 调用示例：
// 取所有属性：john.getDetails()
// 单独取职业：john.getDetails().occupation

扩展优化：支持便捷传入多组属性

如果之后需要给Person类新增更多属性，挨个传位置参数会很麻烦，可以修改构造函数支持传入对象参数，新增属性无需调整构造函数逻辑：

// 修改后的构造函数
function Person(personInfo) {
  for(let key in personInfo) {
    this[key] = personInfo[key]
  }
}
// 调用示例，新增属性直接加在传入对象里即可
var john = new Person({
  name: "John Doe",
  age: "32",
  occupation: "Web Developer",
  city: "上海",
  workYear: "5年"
})

内容的提问来源于stack exchange，提问作者Muhammad Riad Ibnul Lal Sharif