Javascript 从不同的文件创建javascript对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14335526/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating javascript objects from different files
提问by Danny
I've been trying to do javascript for sometime now, but i want it to be "object-orientated" so I'm trying to create different javascript classes in different files and try to create an object and call it's methods in a different file function, but it doesn't seem to work.
我一直在尝试做 javascript 一段时间了，但我希望它是“面向对象的”，所以我试图在不同的文件中创建不同的 javascript 类并尝试创建一个对象并在不同的文件中调用它的方法功能，但它似乎不起作用。
This is what I have so far:
这是我到目前为止：
person.js
人物.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
作业.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
索引.html
<!DOCTYPE HTML>
<HTML>
<head>
<title>javascript test</title>
<script src="main.js" type="javascript"></script>
</head>
<body>
<p id="mainBody"></p>
</body>
</HTML>
any help or advice would be greatly appreciated.
任何帮助或建议将不胜感激。
Many thanks
非常感谢
EDIT: Many thanks for all the answers and suggestions, however, I've included all my javascript files and still it doesn't work...
编辑：非常感谢所有的答案和建议，但是，我已经包含了我所有的 javascript 文件，但它仍然不起作用......
回答by Minko Gechev
Currently JavaScript is not clever enough to find your dependencies without help.
目前 JavaScript 不够聪明，无法在没有帮助的情况下找到您的依赖项。
You need:
你需要：
<!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>
Note:
笔记：
If you want on-demand load of the dependencies then you can use AMD(Asynchronous Module Definition) with requirejsor something else.
如果您想要按需加载依赖项，那么您可以将AMD（异步模块定义）与requirejs或其他东西一起使用。
Using AMD you can define something like:
使用 AMD，您可以定义如下内容：
define(['Job', 'person'], function (job, person) {
//Define the module value by returning a value.
return function () {};
});
The define method accepts two arguments: dependencies and function which defines the module. When all dependencies are loaded they are passed as arguments to the function where is the module definition.
define 方法接受两个参数：dependencies 和定义模块的函数。加载所有依赖项后，它们将作为参数传递给模块定义所在的函数。
One more thing to notice is that Personand Jobare not classes. They are just functions (constructor functions) which produces objects based on rules in their definitions.
还有一点要注意的是这Person和Job是不是类。它们只是根据定义中的规则生成对象的函数（构造函数）。
回答by BGerrissen
Files aren't automatically loaded, you need to add each .js file to the document with script tags and in the right order as well, otherwise you will get errors.
文件不会自动加载，您需要将每个 .js 文件添加到带有脚本标签的文档中，并且顺序正确，否则会出错。
You might want to look into requirejs.orgfor dependency management, it's the hawtest thing lately untill ES6 becomes mainstream anyways.
你可能想查看requirejs.org的依赖管理，这是最近最重要的事情，直到 ES6 成为主流。
回答by VB9-UANIC
class methods should be defined via prototype so they receive 'this' reference, like that:
类方法应通过原型定义，以便它们接收“this”引用，如下所示：
Person.prototype.getGender = function()
{
return this.gender;
};
回答by twksos
you can try to include the 1st and 2nd javascript files first. like:
您可以尝试先包含第一个和第二个 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>
回答by Kevin Bowersox
I see three issues with the code.
我看到代码存在三个问题。
The page does not import the proper external Javascript files
该页面未导入正确的外部 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 needs to be a String literal
男性需要是字符串文字
When the interpreter encounters malewithin the Personconstructor it looks for a variable, which it cannot find.
当解释器male在Person构造函数中遇到它时，它会寻找一个它找不到的变量。
function main()
{
var employee = new Person("Richard", 23, "male");
document.getElementById("mainBody").innerHTML = employee.getName();
}
The code should call the main function.
代码应该调用 main 函数。
Without a call to the main function the code is never kicked off.
如果不调用 main 函数，代码永远不会启动。
function main()
{
var employee = new Person("Richard", 23, "male");
document.getElementById("mainBody").innerHTML = employee.getName();
}
main();
Working Example: http://jsfiddle.net/R7Ybn/
工作示例：http: //jsfiddle.net/R7Ybn/
回答by Mihai Stancu
You need to return the object created by Personin order for it to constitute a new instance of the Personprototype.
您需要返回创建的对象Person，以便它构成Person原型的新实例。
return(this);
回答by mattsbox
This isn't working because, according to your HTML code, the browser is only loading main.js
这不起作用，因为根据您的 HTML 代码，浏览器仅加载 main.js
<script src="main.js" type="javascript"></script>
Since Javascript runs in the browser, not on the server where the other files are, the browser will try to execute main.js and fail, since it doesn't have access to the classes in the other files. If you include each one of the files (making sure that every file is included after the one it requires), you should have more success.
由于 Javascript 在浏览器中运行，而不是在其他文件所在的服务器上，浏览器将尝试执行 main.js 并失败，因为它无法访问其他文件中的类。如果您包含每个文件（确保每个文件都包含在它需要的文件之后），您应该会取得更大的成功。
For example:
例如：
<script src="Job.js" type="javascript"></script>
<script src="person.js" type="javascript"></script>
<script src="main.js" type="javascript"></script>
回答by Jersh
ES6: https://www.sitepoint.com/understanding-es6-modules/
ES6：https://www.sitepoint.com/understanding-es6-modules/
Supported in Safari as of Summer of 2017, but no support in other browsers. In a year or so, it seems like it'll be supported by Edge, Firefox, Chrome, Opera, and safari. So keep it in mind?
自 2017 年夏季起在 Safari 中受支持，但在其他浏览器中不支持。在一年左右的时间里，Edge、Firefox、Chrome、Opera 和 safari 似乎都会支持它。所以记住了吗？
回答by Frazer Flanagan
I was having a similar issue and the problem for me stemmed from writing
我遇到了类似的问题，我的问题源于写作
"script src="Person.js" type="javascript"
“脚本源代码=“Person.js”类型=“javascript”
instead of
代替
"script src="Person.js" type="text/javascript" in my index.html file
“script src="Person.js" type="text/javascript" 在我的 index.html 文件中
Hope this Helps,
希望这可以帮助，
