当控制台显示对象内容时，为什么对象显示为未定义？

Question

我想完成的工作很简单。我希望能够在文本框中输入我的名字，点击提交，并将信息打印到对象内的控制台。当我调出控制台时，它似乎工作。我可以键入不同的名称，并将其打印到控制台中。但是，如果我尝试查找Person对象，则会出现一个错误，指出它未定义。发生了什么？

https://jsfiddle.net/w0zwrqoa/

HTML

<p>First Name</p> 
    <input type="text" id="fname"> 
    <p>Last Name</p> 
    <input type="text" id="lname"> 
    <button id="button">Submit</button> 

JS

var Person = function (firstname, lastname) { 
    this.firstname = firstname; 
    this.lastname = lastname; 
}; 

document.getElementById('button').onclick = function() { 

var fn = document.getElementById('fname').value; 
var ln = document.getElementById('lname').value; 

function addPerson (person){ 
    console.log(person); 
}; 

var user = new Person (fn, ln); 

addPerson(user); 

}; 

Answer 1

可变用户的作用域的onclick功能和它不存在外部。你可以之前定义用户如下面的代码：

var Person = function (firstname, lastname) { 
    this.firstname = firstname; 
    this.lastname = lastname; 
}; 

var user; 

document.getElementById('button').onclick = function() { 

    var fn = document.getElementById('fname').value; 
    var ln = document.getElementById('lname').value; 

    function addPerson(person) { 
     console.log(person); 
    }; 

    user = new Person(fn, ln); 

    addPerson(user); 

}; 

Answer 2

正如在评论中说，键入“人”到控制台不一定反映刚刚创建的“人”。添加一个阵列，

People = []; 
var Person = function... 

，然后加入新的人在你加人功能的阵列，

People.push(person); 
console.log(person); 

让你现在在控制台中输入“人”和看到的东西你”重新寻找。