无法访问从构造函数创建的对象答案

【问题标题】：Unable to access object created froma constructor function无法访问从构造函数创建的对象
【发布时间】：2018-08-23 04:10:25
【问题描述】：

这是我的问题：我有两个输入字段，单击按钮后会触发一个函数，以使用这两个输入值创建一个新对象（来自对象构造函数）。

函数中包含的console.log以正确的方式显示object.input1和object.input2。但是，一旦功能完成，我再次尝试控制台记录新创建的对象 OR object.input1 OR object.input1，我得到'未定义'

如果我将新创建的对象推送到数组中，没关系，我可以从数组中访问对象，但不确定如何在数组中访问对象元素。无论如何，我不明白我在创建新对象时做错了什么。任何帮助将不胜感激。

<html>

<input type="number" id='input1' placeholder="Enter number only">
<input type="text" id='input2' placeholder="Max length 300" maxlength='300'>
<button id='btn'>Submit</button>


<script>
    var day1, notes1, day1List;


    function DayList(day, notes) {

        this.day = day;
        this.notes = notes;
    }

    document.getElementById('btn').onclick =

        function() {

            var day1 = document.getElementById('input1').valueAsNumber;

            var notes1 = document.getElementById('input2').value;

            var day1List = new DayList(day1, notes1);

            console.log(day1List.day, day1List.notes);

        }
</script>
</html>

【问题讨论】：

标签： javascript

【解决方案1】：

即使您是全局声明变量：

var day1, notes1, day1List;

您没有设置这些，因为您是在函数范围内重新声明它们：

function() {
    var day1 = document.getElementById('input1').valueAsNumber;
    var notes1 = document.getElementById('input2').value;
    var day1List = new DayList(day1, notes1);
}

只需删除 var 声明即可应用于全局范围：

function() {
    day1 = document.getElementById('input1').valueAsNumber;
    notes1 = document.getElementById('input2').value;
    day1List = new DayList(day1, notes1);
}

然而，看看你的结构，我相信你只需要 day1List 作为一个全局变量。其余的似乎都存储在其中。

【讨论】：

【解决方案2】：

正如 fanfavorate 所说，删除双 var 声明。我还稍微重构了您的代码。您通常应该使用addEventListener 而不是onclick。这被认为是最佳实践。

let day1, notes1, day1List;

function DayList(day, notes) {

  this.day = day;
  this.notes = notes;
}

document.getElementById('btn').addEventListener('click', () => {
  day1 = document.getElementById('input1').valueAsNumber;

  notes1 = document.getElementById('input2').value;

  day1List = new DayList(day1, notes1);

  console.log(day1List.day, day1List.notes);
})

<input type="number" id='input1' placeholder="Enter number only">
<input type="text" id='input2' placeholder="Max length 300" maxlength='300'>
<button id='btn'>Submit</button>

【讨论】：