When to use Prototypes & the correct usage of Prototypes ( Javascript )

Question

I have been programming in Javascript for a while and I am quite comfortable with it. And I know the basic concept of prototypes and I have also used them a few times. But one thing I can't figure out is that when should a prototype be used.

And what is the correct usage of prototypes. For example:

Currently I am creating a Task Management system. Within this system you can create Projects, each project can then have multiple tasks added into it. Currently I have created the functionality of creating projects.

All user projects are saved into a Array in my MongoDB database. Once a user creates a project it is added into the projects array. After that I created a getProjects function. This functions uses a GET request and retrieves all the projects for the logged-in user. Once the data is retrieved I save the projects array into an angular variable:

CREATE Projects:

  // 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 Projects:

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

 };

All the returning JSON data from the above request is saved in:

   $scope.userProjects = [];

Currently I am using angular's ng-repeat in my HTML file to loop through the userProjects array and create a Div for each project in the array (within ng-repeat). And in the centre of the div writer the name of the project. See below:

Now here is my question

I want to make each div "Clickable" to when a user clicks on the div they are directed to another page where they can add tasks within the project.

I thought about using Prototype functionality to attach links to each div. So my thought was that I would create Projects class in my angular controller and while I loop through the project array that was returned from the GET request, for each project in the array I will create an instance (object) of that class and attached a clickable event to each div.

Is this a good approach? Is this a good use of prototype? Should I even be using prototypes? If not, what recommendations could you make?

If you need more information to answer the question please let me know.

Thanks in advance.

Answer 1

The correct usage of prototypes in JavaScript depends on what you want to achieve. The understanding of what a prototype is and why it exists is a very good question.

Prototype exists in JavaScript, because objects do not have classical inheritance based on a Class, like in traditional languages. In JavaScript, objects are pairs of keys and values. They have one additional property: a pointer to another object: the object prototype. Important to know is that every function is a first-class object in JavaScript.

Prototype is used primarily for inheritance; you add methods and properties on a function’s prototype to make methods and properties available to its instances. Every object inherits properties from an object, and is the object’s parent. This makes the prototype property work like a class property - all instances deriving from the same parent class have access to this property.

If you do not use the property, it will be a static property, which bound to that particular type of instance without inheritance.

So, when to use prototypes? Prototypes are for optimization. As you are thinking in objects and you want shared attributes for a specific problem domain, this is a good reason to use the prototype property to implement this.