10

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

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>

ノート：

依存関係のオンデマンド ロードが必要な場合は、requirejsなどでAMD (非同期モジュール定義) を使用できます。

AMD を使用すると、次のように定義できます。

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

define メソッドは、依存関係とモジュールを定義する関数の 2 つの引数を受け入れます。すべての依存関係がロードされると、モジュール定義である関数に引数として渡されます。

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

于 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

最初に 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>
于 2013-01-15T10:23:30.203 に答える
0

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

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

コードには 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 関数を呼び出さないと、コードが開始されることはありません。

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 を実行しようとして失敗します。これは、他のファイルのクラスにアクセスできないためです。ファイルを 1 つずつインクルードすると (必要なファイルの後にすべてのファイルがインクルードされるようにします)、より多くの成功を収めることができます。

例えば：

<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

私は同様の問題を抱えていましたが、私にとっての問題は書き込みに起因していました

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

それ以外の

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

お役に立てれば、

于 2017-10-05T15:28:49.077 に答える