将值从输入传递给返回对象的构造函数

Question

目标：我试图将值从输入传递给返回对象的构造函数

问题：我得到的所有回报都是“未定义”，我认为这可能与我的按钮上的 onclick 有关，也许我没有正确调用它。我真的不确定。我在互联网上找遍了都找不到答案。

JavaScript

var name = document.getElementById('inputValueName').value;
var age = document.getElementById('inputValueAge').value;
var state = document.getElementById('inputValueState').value;

function person(name, age, state) {
    this.name = name;
    this.age = age;
    this.state = state;
}
var NewPerson = new person(name, age, state);

console.log(NewPerson);

HTML

<input type="text" id="inputValueName">
<input type="text" id="inputValueAge">
<input type="text" id="inputValueState">
<button id="btn" onclick="person();">Add</button>

Answer 1

你得到undefinedfor name, age, 和stateinsideperon是因为person当你点击按钮时你没有传递任何东西：

<button id="btn" onclick="person();">Add</button>
<!-- Where are the arguments? ---^            -->

（以person这种方式调用时，您也会返回undefined调用的结果，因为您没有使用过new并且person没有return x声明。但我假设您指的是参数，因为您没有查看返回值价值。）

你的 JavaScript 代码显示你在别处调用它是正确的（除了在 JavaScript 名称^{1 中}获得关于大写的标准实践）：

var NewPerson = new person(name, age, state);

如果您将所有 JavaScript 代码（获取值、调用new person等）打包到一个新函数中，例如createPerson，然后调用它，它会在很大程度上起作用：

<button id="btn" onclick="person();">Add</button>
<!-- Where are the arguments? ---^            -->

var NewPerson = new person(name, age, state);

¹您显然可以在自己的代码中自由地做您喜欢做的事情，但绝大多数情况下，JavaScript 中的约定是构造函数（您通过 调用的那些new）以大写字母开头，并且基本上没有其他变量这样做。因此，这将是Person（不person），对于构造函数，newPerson（不NewPerson）为变量引用新的人。

旁注：onxyz-attribute-style 事件处理程序对于快速而肮脏的模型很方便，但它们有几个问题，尤其是它们调用的函数必须是全局函数，而全局函数是坏事™。确保您熟悉用于实际应用程序addEventListener等的现代事件处理。