使用JavaScript构造方法创建对象不显示、变量undefined

云原生阿岚

2026-8-27

错误根因

构造函数实例化时漏写new关键字，是JavaScript构造函数使用的高频典型错误。
直接以普通函数形式调用char()时，函数内部的this在非严格模式下会指向全局window对象，且函数本身无显式return值，默认返回undefined。将undefined赋值给character变量后，再读取undefined的属性就会触发报错，页面内容自然无法渲染。

修复方法

核心修改：调用构造函数生成实例时必须补充new关键字，修改对应代码行为：

var character = new char("Goku", "dragonballz", "saiyan");

可选规范优化（不影响功能，但能降低后续写错的概率）：
- JavaScript中构造函数默认约定首字母大写，建议将函数名char改为Char，从命名上和普通工具函数做区分
- 页面h1文案标注的是“使用对象字面量创建JS对象”，但实际代码用的是构造函数创建逻辑，属于文案不匹配，可按需调整

修复后完整可运行代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>CREATE JAVASCRIPT OBJECTS USING CONSTRUCTOR</h1>
    <p id="text"></p>
    <script language="javascript" type="text/javascript">
        document.write("OBJECT CREATION");

        function Char(name, anime, specie){
            this.name = name;
            this.anime = anime;
            this.specie = specie;
        }
        var character = new Char("Goku", "dragonballz", "saiyan");
        document.getElementById("text").innerHTML = character.name + " is from " + character.anime + " and he is a super " + character.specie + " Alien ";
    </script>
</body>
</html>