web-dev-qa-db-ja.com

さまざまなファイルからJavaScriptオブジェクトを作成する

私はしばらくの間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ファイルを含めましたが、それでも機能しません...

javascriptclassobject
10
Danny

現在、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メソッドは、依存関係とモジュールを定義する関数の2つの引数を受け入れます。すべての依存関係がロードされると、モジュール定義である関数に引数として渡されます。

もう1つ注意すべき点は、PersonとJobはクラスではないということです。それらは、定義内のルールに基づいてオブジェクトを生成する単なる関数（コンストラクター関数）です。

17
Minko Gechev

ファイルは自動的に読み込まれません。各.jsファイルをスクリプトタグを使用して正しい順序でドキュメントに追加する必要があります。そうしないと、エラーが発生します。

依存関係の管理については requirejs.org を調べることをお勧めします。とにかく、ES6が主流になるまで、これは最近最も厄介なことです。

4
BGerrissen

最初に1番目と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>
2
twksos

クラスメソッドは、次のように「this」参照を受け取るようにプロトタイプを介して定義する必要があります。

Person.prototype.getGender = function()
{
  return this.gender;
};
2
VB9-UANIC

私は同様の問題を抱えていました、そして私にとっての問題は書くことから生じました

"script src =" Person.js "type =" javascript "

の代わりに

index.htmlファイルの "script src =" Person.js "type =" text/javascript "

お役に立てれば、

0
Frazer Flanagan

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

2017年夏の時点でSafariでサポートされていますが、他のブラウザではサポートされていません。 1年ほどで、Edge、Firefox、Chrome、Opera、およびsafariでサポートされるようです。それでそれを覚えていますか？

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

0
Jersh

Personプロトタイプの新しいインスタンスを構成するには、Personによって作成されたオブジェクトを返す必要があります。

return(this);
0
Mihai Stancu

コードに3つの問題があります。

ページは適切な外部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関数を呼び出す必要があります。

Main関数を呼び出さないと、コードが開始されることはありません。

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

main();

実例： http://jsfiddle.net/R7Ybn/

0
Kevin Bowersox

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>
0
mattsbox