10

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

这是我到目前为止所拥有的：

人.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();
}

索引.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 文件，但它仍然无法正常工作......

4

9 回答 9

18

目前 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不是类。它们只是根据定义中的规则生成对象的函数（构造函数）。

于 2013-01-15T10:22:25.637 回答
4

文件不会自动加载，您需要将每个 .js 文件添加到带有脚本标签的文档中，并以正确的顺序添加，否则会出错。

您可能想查看requirejs.org的依赖管理，这是最近最重要的事情，直到 ES6 成为主流。

于 2013-01-15T10:21:51.263 回答
3

类方法应通过原型定义，以便它们接收“this”引用，如下所示：

Person.prototype.getGender = function()
{
  return this.gender;
};
于 2013-01-15T10:25:49.570 回答
2

您可以尝试首先包含第一个和第二个 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>
于 2013-01-15T10:23:30.203 回答
0

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

return(this);
于 2013-01-15T10:21:47.723 回答
0

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

该页面未导入正确的外部 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/

于 2013-01-15T10:24:31.707 回答
0

这不起作用，因为根据您的 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>
于 2013-01-15T10:26:48.163 回答
0

ES6：https ://www.sitepoint.com/understanding-es6-modules/

自 2017 年夏季起在 Safari 中受支持，但在其他浏览器中不支持。在一年左右的时间里，Edge、Firefox、Chrome、Opera 和 safari 似乎都会支持它。所以记住了吗？

https://caniuse.com/#feat=es6-module

于 2017-08-11T22:57:16.400 回答
0

我遇到了类似的问题，对我来说问题源于写作

"脚本 src="Person.js" 类型="javascript"

代替

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

希望这可以帮助，

于 2017-10-05T15:28:49.077 回答