使用构造函数创建JavaScript对象时遇Uncaught TypeError报错求助

问题背景 #

运行构造函数创建JavaScript对象的代码时，出现如下报错：

Uncaught TypeError: Cannot read properties of undefined (reading 'name')

完整代码如下：

<!DOCTYPE html>
<html>
    <head>
       <title>
        JavaScript Object
       </title>

    </head>
    <body>
    <h1> Creating javaScript Object</h1>
    <p id="demo"></p>
    <script>
        var student={
            name:'shweta',
            age:'10',
            studies:'CS',
        };
    
    document.getElementById("demo").innerHTML="My name is "+" "+student.name+" and my age is "+student.age+" i studies"+student.studies;
</script>
<!--Creating object using new key word-->
<script>
    var student=new Object();
    student.name='shweta',
    student.age='25',
    student.studies='javascript'
    document.getElementById("demo").innerHTML=student.name+student.age+student.studies;
</script>
<!--Object creation using constructor-->
<script>
    function stud(name, age, studies){
        this.name=name;
        this.age=age;
        this.studies=studies;
    }
    varstudent=stud('Crish',25,'javascript')
    document.getElementById("demo").innerHTML="my name is "+student.name +" of age "+student.age+" studies "+student.studies;
</script>
    </body>
</html>

错误原因 #

• 构造函数调用缺少new关键字：自定义构造函数必须通过new关键字调用才能创建实例对象。直接调用stud('Crish',25,'javascript')时，函数以普通函数模式执行，this指向全局对象（浏览器中为window），函数默认返回undefined，导致后续变量赋值无效。
• 变量名拼写错误：varstudent应为var student，缺少空格导致变量声明不合法，后续代码中访问的student仍是之前定义的对象，而非构造函数创建的新实例。

解决方法 #

修正构造函数调用的两个核心问题：添加new关键字、修正变量名拼写，同时优化字符串拼接的可读性。

修正后的构造函数代码段：

function stud(name, age, studies){
    this.name=name;
    this.age=age;
    this.studies=studies;
}
var student = new stud('Crish',25,'javascript')
document.getElementById("demo").innerHTML="my name is "+student.name +", of age "+student.age+", studies "+student.studies;

完整修正后的代码：

<!DOCTYPE html>
<html>
    <head>
       <title>
        JavaScript Object
       </title>

    </head>
    <body>
    <h1> Creating javaScript Object</h1>
    <p id="demo"></p>
    <script>
        var student={
            name:'shweta',
            age:'10',
            studies:'CS',
        };
    
    document.getElementById("demo").innerHTML="My name is "+" "+student.name+" and my age is "+student.age+" i studies "+student.studies;
</script>
<!--Creating object using new key word-->
<script>
    var student=new Object();
    student.name='shweta',
    student.age='25',
    student.studies='javascript'
    document.getElementById("demo").innerHTML=student.name+" "+student.age+" "+student.studies;
</script>
<!--Object creation using constructor-->
<script>
    function stud(name, age, studies){
        this.name=name;
        this.age=age;
        this.studies=studies;
    }
    var student = new stud('Crish',25,'javascript')
    document.getElementById("demo").innerHTML="my name is "+student.name +", of age "+student.age+", studies "+student.studies;
</script>
    </body>
</html>

额外建议：避免重复使用同一个变量名（多次声明student），可使用不同变量名区分不同对象，防止变量覆盖引发逻辑混乱。

内容的提问来源于stack exchange，提问作者Shweta Chanagoudar