如何在JavaScript中访问动态创建对象及其属性？按钮点击无输出问题

我写了一个创建Person对象的函数并绑定到按钮的onClick事件，希望无需变量名就能获取用户输入的数据。点击按钮时会弹出提示框让用户输入值，但输入完成后控制台没有对应输出。

我的代码如下：

<button type="submit" onClick="addNewPerson()">Add New Person</button>

<script>
class Person {
  constructor(fname, lname, birthDate) {
    this.firstName = fname;
    this.lastName = lname;
    this.dov = birthDate;
  }
}

let person1 = new Person("Mark", "Johnson", "12-07-1972");
let person2 = new Person("John", "Miller", "08-017-1923");

function addNewPerson() {
  let ffname = prompt("enter your firstname", "Roger");
  let llname = prompt("enter your lastname", "Doger");
  let ddov = prompt("enter your date of birth", "July 6 2024");

  return new Person(ffname, llname, ddov);
}

console.log(addNewPerson())
console.log(person1); 
console.log(person2); 
console.log(new Person(this.fname, this.lname, this.birthDate));
</script>

实际控制台只打印了这些内容：

Object { firstName: "Roger", lastName: "Doger", dov: "July 6 2024" }
Object { firstName: "Mark", lastName: "Johnson", dov: "12-07-1972" }
Object { firstName: "John", lastName: "Miller", dov: "08-017-1923" }
Object { firstName: undefined, lastName: undefined, dov: undefined }

预期是点击按钮时，输入的内容能显示在控制台，但没实现。

1. 页面加载时就直接执行了console.log(addNewPerson())，所以刚打开页面就会弹出提示框并打印默认值，这不是点击按钮触发的。
2. 点击按钮时，addNewPerson()函数只是返回了新创建的Person对象，但没有任何代码把这个对象输出到控制台，所以点击后没新内容。
3. 最后一行new Person(this.fname, ...)里的this指向全局对象（浏览器中是window），而全局环境下根本没有fname、lname、birthDate这些变量，所以创建出的对象属性都是undefined。

修改代码，移除页面加载时自动执行的多余打印，在addNewPerson()内部添加控制台输出，确保点击按钮时能打印用户输入的内容：

<button type="submit" onClick="addNewPerson()">Add New Person</button>

<script>
class Person {
  constructor(fname, lname, birthDate) {
    this.firstName = fname;
    this.lastName = lname;
    this.dov = birthDate;
  }
}

// 保留已有的Person实例
let person1 = new Person("Mark", "Johnson", "12-07-1972");
let person2 = new Person("John", "Miller", "08-017-1923");

// 页面加载时先打印已有实例
console.log(person1); 
console.log(person2); 

function addNewPerson() {
  let ffname = prompt("enter your firstname", "Roger");
  let llname = prompt("enter your lastname", "Doger");
  let ddov = prompt("enter your date of birth", "July 6 2024");

  // 创建新对象并直接打印到控制台
  const newPerson = new Person(ffname, llname, ddov);
  console.log(newPerson);
  
  // 依然可以返回对象，方便后续扩展使用
  return newPerson;
}
</script>

• 把person1和person2的打印放在页面加载时，确保一开始就能看到已有实例。
• 在addNewPerson()内部创建新对象后，立即用console.log()输出，这样点击按钮完成输入后，控制台会显示用户输入的内容。
• 移除了原来页面加载时自动执行的console.log(addNewPerson())和最后一行无效的new Person创建代码，避免不必要的弹窗和错误输出。

内容的提问来源于stack exchange，提问作者Jason Bruce