Question

我一直想尝试javascript一段时间，但我希望它是“面向对象的”所以我试图在不同的文件中创建不同的javascript类并尝试创建一个对象并调用它的方法一个不同的文件功能，但它似乎不起作用。

这是我到目前为止所做的：

person.js

function Person(name, age, gender)
{
    this.age = age;
    this.name = name;
    this.gender = gender;

    this.job;

    this.setJob = function(job)
    {
        this.job = job;
    }

    this.getAge = function()
    {
        return this.age;
    }

    this.getName = function()
    {
        return this.name;
    }

    this.getGender = function()
    {
        return this.gender;
    }
}

Job.js

function Job(title)
{
    this.title = title;
    this.description;

    this.setDescription = function(description)
    {
        this.description = description;
    }
}

main.js

function  main()
{
    var employee = new Person("Richard", 23, male);
    document.getElementById("mainBody").innerHTML = employee.getName();
}

的index.html

<!DOCTYPE HTML>
<HTML>
<head>
    <title>javascript test</title>
    <script src="main.js" type="javascript"></script>
</head>
<body>
    <p id="mainBody"></p>
</body>
</HTML>

非常感谢任何帮助或建议。

非常感谢

编辑：非常感谢所有的答案和建议，但是，我已经包含了所有的javascript文件，但它仍然不起作用...

Answer 1

目前，JavaScript在没有帮助的情况下找不到您的依赖关系并不够聪明。

你需要：

<!DOCTYPE HTML>
<HTML>
<head>
    <title>javascript test</title>
    <script src="person.js" type="javascript"></script>
    <script src="Job.js" type="javascript"></script>
    <script src="main.js" type="javascript"></script>
</head>
<body>
    <p id="mainBody"></p>
</body>
</HTML>

注意：

如果您希望按需加载依赖项，则可以将AMD（异步模块定义）与requirejs或其他内容一起使用。

使用AMD，您可以定义类似的内容：

define(['Job', 'person'], function (job, person) { //Define the module value by returning a value. return function () {}; });

define方法接受两个参数：依赖项和定义模块的函数。当加载所有依赖项时，它们作为参数传递给函数，其中是模块定义。

还有一点需要注意的是，Person和Job不是类。它们只是函数（构造函数），它们根据定义中的规则生成对象。

Answer 2

文件未自动加载，您需要使用脚本标记以正确的顺序将每个.js文件添加到文档中，否则您将收到错误。

您可能希望查看requirejs.org的依赖关系管理，最近这是最糟糕的事情，直到ES6成为主流。

Answer 3

您可以尝试先包含第一个和第二个javascript文件。像：

<!DOCTYPE HTML>
<HTML>
<head>
    <title>javascript test</title>
    <script src="person.js" type="javascript"></script>
    <script src="Job.js" type="javascript"></script>
    <script src="main.js" type="javascript"></script>
</head>
<body>
    <p id="mainBody"></p>
</body>
</HTML>

Answer 4

应该通过原型定义类方法，以便它们接收'this'引用，那样：

Person.prototype.getGender = function()
{
  return this.gender;
};

Answer 5

您需要返回Person创建的对象，以便它构成Person原型的新实例。

return(this);

Answer 6

我看到代码存在三个问题。

该页面未导入正确的外部Javascript文件

<head>
    <title>javascript test</title>
    <script src="job.js" type="javascript"></script>
    <script src="person.js" type="javascript"></script>
    <script src="main.js" type="javascript"></script>
</head>

男性需要成为字符串文字

当解释器在male构造函数中遇到Person时，它会查找一个找不到的变量。

function  main()
{
    var employee = new Person("Richard", 23, "male");
    document.getElementById("mainBody").innerHTML = employee.getName();
}

代码应调用主函数。

在没有调用main函数的情况下，代码永远不会被启动。

function  main()
{
    var employee = new Person("Richard", 23, "male");
    document.getElementById("mainBody").innerHTML = employee.getName();
}

main();

工作示例：http://jsfiddle.net/R7Ybn/

Answer 7

这不起作用，因为根据您的HTML代码，浏览器只加载main.js

<script src="main.js" type="javascript"></script>

由于Javascript在浏览器中运行，而不是在其他文件所在的服务器上运行，因此浏览器将尝试执行main.js并失败，因为它无法访问其他文件中的类。如果你包含每个文件（确保每个文件都包含在它所需的文件之后），你应该会有更多的成功。

例如：

<script src="Job.js" type="javascript"></script>
<script src="person.js" type="javascript"></script>
<script src="main.js" type="javascript"></script>

Answer 8

我遇到了类似的问题，而我的问题源于写作

“script src =”Person.js“type =”javascript“

而不是

“script src =”Person.js“type =”text / javascript“ 在我的index.html文件中

希望这有助于，

从不同的文件创建javascript对象

person.js

Job.js

main.js

的index.html

8 个答案: