4

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:

enter image description here

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.

  • 1
    In general, there's no such thing as "the correct usage" of a given language feature. A more answerable question would be the one implied by your third paragraph: "Is it a good idea to use prototypes to create 'users' that have methods X, Y, Z?" If you could edit your question to something like that, and provide a little more detail about what you have in mind when you say "using prototypes", then I could probably give you a useful answer. – Ixrec Jul 11 '15 at 14:26
  • @Ixrec Apologies for the delay, its been a hectic weekend. I have made the changes to my question. I hope this would be enough to help you answer the question. If you need more information please let me know. And Thank you so much. – Lorenzo von Matterhorn Jul 13 '15 at 14:28
  • +1 That is a big improvement. Unfortunately I have zero knowledge of Angular so I can't answer this after all, but that sounds like a perfectly sensible use of (prototype-based) classes to me. – Ixrec Jul 13 '15 at 17:29
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.