web-dev-qa-db-ja.com

プロトタイプを使用するタイミングとプロトタイプの正しい使用法（Javascript）

私はしばらくの間JavaScriptでプログラミングをしており、私はそれにかなり慣れています。そして、私はプロトタイプの基本的な概念を知っており、それらを数回使用しました。しかし、私が理解できないことの1つは、プロトタイプをいつ使用するべきかということです。

そして、プロトタイプの正しい使い方は何ですか。例えば：

現在、私はタスク管理システムを作成しています。このシステム内でプロジェクトを作成し、各プロジェクトに複数のタスクを追加できます。現在、私はプロジェクトを作成する機能を作成しています。

すべてのユーザープロジェクトは、MongoDBデータベースの配列に保存されます。ユーザーがプロジェクトを作成すると、プロジェクト配列に追加されます。その後、getProjects関数を作成しました。この関数はGETリクエストを使用して、ログインしているユーザーのすべてのプロジェクトを取得します。データを取得したら、プロジェクト配列をangular変数に保存します。

CREATEプロジェクト：

  // Create Project Function
 $scope.createProject = function(id){
    var pTitle = document.getElementById("pojectTitle").value;
    console.log("Entered create Project fucntion");
    console.log("user id is" + id);
    console.log(pTitle);

    // Simple POST request example (passing data) :
    $http.post("/createProject/"+ id +"", {
        projectTitle: pTitle,
        userID      : id
    }).
    success(function(data, status, headers, config) {
        // this callback will be called asynchronously
        // when the response is available
        $scope.getProjects();
        console.log("project created");
        console.log("this is the response data " + data);
    }).
    error(function(data, status, headers, config) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
    });
 };

GETプロジェクト：

$scope.getProjects = function(id) {
   console.log("getting user projects, please wait ......");
   // Simple GET request example (passing data) :
   $http.get("/user/projects/" + id + "", {

   }).
   success(function(data, status, headers, config) {
       // this callback will be called asynchronously
       // when the response is available

       $scope.userProjects = data;
       console.log("user projects are here " + $scope.userProjects);

   }).
   error(function(data, status, headers, config) {
       // called asynchronously if an error occurs
       // or server returns response with an error status.
   });

 };

上記のリクエストから返されるすべてのJSONデータは次の場所に保存されます：

   $scope.userProjects = [];

現在、HTMLファイルでAngularのng-repeatを使用してuserProjects配列をループし、配列内のプロジェクトごとに（ng-repeat内で）Divを作成しています。そしてdivライターの中央にプロジェクトの名前。下記参照：

enter image description here

これが私の質問です

ユーザーがdivをクリックすると、各divが「クリック可能」になり、プロジェクト内にタスクを追加できる別のページに移動します。

プロトタイプ機能を使用して各divにリンクをアタッチすることを考えました。したがって、私の考えは、angularコントローラでProjectsクラスを作成し、GETリクエストから返されたプロジェクト配列をループしている間に、配列内の各プロジェクトに対してインスタンスを作成することでした。そのオブジェクトの（オブジェクト）をクリックし、クリック可能なイベントを各divにアタッチします。

これは良いアプローチですか？これはプロトタイプの良い使い方ですか？プロトタイプを使用する必要がありますか？そうでない場合、どのような推奨事項を作成できますか？

質問への回答にさらに情報が必要な場合は、お知らせください。

前もって感謝します。

design-patternsjavascriptangularjsprototyping
4
Lorenzo von Matterhorn

JavaScriptでのプロトタイプの正しい使用法は、達成したいことによって異なります。プロトタイプとは何か、なぜ存在するのかを理解することは非常に良い質問です。

プロトタイプはJavaScriptに存在します。これは、オブジェクトには従来の言語のように、クラスに基づく古典的なinheritanceがないためです。 JavaScriptでは、objectsはキーと値のペアです。 1つの追加プロパティ：別のオブジェクトへのポインタ：オブジェクトプロトタイプ。知っておくべき重要なことは、すべての関数がJavaScriptではfirst-classオブジェクトであることです。

プロトタイプは主に継承に使用されます。関数のプロトタイプにメソッドとプロパティを追加して、メソッドとプロパティをそのインスタンスで使用できるようにします。すべてのオブジェクトはオブジェクトからプロパティを継承し、オブジェクトの親です。これにより、プロトタイププロパティがクラスプロパティのように機能します。同じ親クラスから派生するすべてのインスタンスがこのプロパティにアクセスできます。

プロパティを使用しない場合は、継承なしで特定のタイプのインスタンスにバインドされるstaticプロパティになります。

では、いつプロトタイプを使用するのですか？プロトタイプは最適化のためのものです。オブジェクトを検討していて、特定の問題ドメインの共有属性が必要な場合、これがプロトタイププロパティを使用してこれを実装する良い理由です。

1
MiningSam