Question

我认为简单的代码无效。它说 person不是构造函数，即使我很确定它是。请帮我。我出于某种原因无法理解它。

<!DOCTYPE html>
    <html>
    <head>
        <title>...</title>
        <script type="text/javascript">
            var people = 0;     
            function person(name, age, colour){
                this.name = name;
                this.age = age;
                this.colour = colour;
            }

            function triggerNew(){
                var s = document;
                s.getElementById("hiddenPers").style = "opacity: 100;"
            }

            function submitPerson(){
                var n = document.getElementById("name").value;
                var a = document.getElementById("age").value;
                var c = document.getElementById("colour").value;
                people++;
                var person = new person(n, a, c);
                alert(person1);
                document.getElementById("hiddenPers").style = "opacity: 0;"
            }

        </script>
        <style type="text/css">

        </style>
    </head>
    <body>
    <button id="newPerson" onclick="triggerNew()">New Person!</button>
    <div id="hiddenPers" style="opacity: 0;">
        <input type="text" id="name" placeholder="Name:"><br>
        <input type="text" id="age" placeholder="Age: "><br>
        <input type="text" id="colour" placeholder="Favourite Colour:">
        <button id="submitPerson" onclick="submitPerson()">Submit Person! `</button>`
    </div>
    </body>
    </html>

Answer 1

更改此行

var person = new person(n, a, c);

到

var person1 = new person(n, a, c);

您的代码

＆＃13;

          var people = 0;     
            function person(name, age, colour){
                this.name = name;
                this.age = age;
                this.colour = colour;
            }

            function triggerNew(){
                var s = document;
                s.getElementById("hiddenPers").style = "opacity: 100;"
            }

            function submitPerson(){
                var n = document.getElementById("name").value;
                var a = document.getElementById("age").value;
                var c = document.getElementById("colour").value;
                people++;
                var person1 = new person(n, a, c);
                alert(person1.name);
                document.getElementById("hiddenPers").style = "opacity: 0;"
            }

＆＃13;

<!DOCTYPE html>
    <html>
    <head>
        <title>...</title>
        <script type="text/javascript">
  

        </script>
        <style type="text/css">

        </style>
    </head>
    <body>
    <button id="newPerson" onclick="triggerNew()">New Person!</button>
    <div id="hiddenPers" style="opacity: 0;">
        <input type="text" id="name" placeholder="Name:"><br>
        <input type="text" id="age" placeholder="Age: "><br>
        <input type="text" id="colour" placeholder="Favourite Colour:">
        <button id="submitPerson" onclick="submitPerson()">Submit Person! `</button>`
    </div>
    </body>
    </html>

＆＃13;

Answer 2

编辑：下面我错误地将function person和var person放在一个范围内。因此，虽然这里有一些事实，但它肯定无法回答实际问题。

你看到的是函数和变量的提升顺序：首先是函数声明，然后是变量声明。您的var person会覆盖function person。

如果这听起来很奇怪，要记住（或学习）两件事：

1）吊装意味着范围内的标识符（变量和函数）可以在明显声明之前使用。例如：

var a=hello();
console.log(a);
function hello(){return 5;}

它也适用于变量，例如

var a=5;
function test(){
  a=2;
  var a;
  console.log("test:",a);
}
test();
console.log(a);

a=2将在test内部，尽管有可能引用外部变量。（当然，如果删除/注释var a;行，则会修改外部作用域中的现有变量。

2）标识符共享一个池，函数没有单独的名称空间。这就是他们可以在你的代码中发生冲突的方式。

function test(){...}
var test=function(){...};
// and both of them are invoked as test() at the end.

Answer 3

请记住，也可以使用function expression：

创建构造函数

var person = function (name, age, colour){
    this.name = name;
    this.age = age;
    this.colour = colour;
}

这一行：

var person = new person(n, a, c);

使用分配给该函数的返回值的新变量覆盖person函数。

因此，更改变量名称应该可以改善这种情况。例如：

＆＃13;

function Person(name, age, colour){
    this.name = name;
    this.age = age;
    this.colour = colour;
}
var a = 15, n = "cat", c = "white";
var personInstance = new Person(n, a, c);
console.log(personInstance);

＆＃13;

此外，正如评论中指出的那样，person1来自哪里？也许这是一个错字......

Answer 4

你在第20行和第29行丢失了分号。此外，这一行：

<button id="submitPerson" onclick="submitPerson()">Submit Person! `</button>`

在关闭标签周围有一些额外的`。

除此之外，问题在于：

  alert(person1);

它应该是：

  alert(person1.name + person1.age + person1.colour);

只要你改变这个：

  var person = new person(n, a, c);

对此：

  var person1 = new person(n, a, c);

var people = 0;     
function person(name, age, colour){
  this.name = name;
  this.age = age;
  this.colour = colour;
}
function triggerNew(){
  var s = document;
  s.getElementById("hiddenPers").style = "opacity: 100;";
}
function submitPerson(){
  var n = document.getElementById("name").value;
  var a = document.getElementById("age").value;
  var c = document.getElementById("colour").value;
  people++;
  var person1 = new person(n, a, c);
  alert(person1.name + person1.age + person1.colour);
  document.getElementById("hiddenPers").style = "opacity: 0;";
}

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <button id="newPerson" onclick="triggerNew()">New Person!</button>
    <div id="hiddenPers" style="opacity: 0;">
      <input type="text" id="name" placeholder="Name:"><br>
      <input type="text" id="age" placeholder="Age: "><br>
      <input type="text" id="colour" placeholder="Favourite Colour:">
      <button id="submitPerson" onclick="submitPerson()">Submit Person!</button>
    </div>
  </body>
</html>

CodePen example:

“人不是建设者”

4 个答案: