Prototype (separately) and constructor (separately) on real examples from sites?

Question

Read about constructors in functions:

function Animal(name) {
  this.name = name;
  this.canWalk = true;
}
var animal = new Animal("Hedgehog");

and also about prototypes:

Animal.prototype.draw = function () {

}

But until the end I did not understand exactly how they reduce the code and, in principle, improve the life of programmers. Why? Because it is better understood on real examples from sites and not on examples of animal or "hedgehogs" of all sorts.

An example from my personal experience: I started the cycles well when I needed to prescribe a function for 30 images, but instead of 30 functions I passed one function into a cycle and reduced it the way the code, so I understood the whole essence of the cycle, and not just memorized its anatomy. That would be for learning resources to make examples of real projects beginners would not ask 100 questions of the same type.

Therefore, I have such questions:

Can you write here how the code would look at first without a prototype and then with a prototype on some small example from the site? Or an example that could be implemented on which site.
Can you write here how the code would look at first without a constructor and then with a prototype on some small example from the site? Or an example that could be implemented on which site.

But do not post in the responses or comments a link from the GitHuB with a large code. Just give a small example here. And it is desirable not an example from the game, but from the site

Dublicate ? https://stackoverflow.com/questions/4508313/advantages-of-using-prototype-vs-defining-methods-straight-in-the-constructor — Eriks, Jun 20 '19 at 07:13
No, because in your link they are asking about the advantages of the prototype over the constructor. And I have a question about the advantages of the constructor (separately) and about the advantages of the prototype (separately) over the normal code — , Jun 20 '19 at 07:29
Reduce the complexity of the code because every instance of `Animal` will have **exactly** the same function definition for the prototype — Cristian Traìna, Jun 20 '19 at 07:31
This is complex stuff, I advise you to keep using it and, after all, read about how it works under the hood — Cristian Traìna, Jun 20 '19 at 07:31

score 0 · Accepted Answer · answered Jun 20 '19 at 08:11

Using an object constructor is a way to initialize an instance with a specific functionality. In most cases it is used to initialize properties with values (like in your code), but can be used for other things as well.

Let use more realistic example - I can initialize a few users object simply by object literals:

const user1 = { 
  id: 'usr123', 
  name: 'Max', 
  questions: 4 
} 

const user2 = { 
  id: 'usr124', 
  name: 'Danny', 
  questions: 2
}

But there are few problems with this approach. First, it can be tedious when used a lot. Second, it's harder to distinguish it from other objects. Both of these issues can be solved with construction function:

function User(id, name, questions) {
  this.id = id;
  this.name = name;
  this.questions = questions ? questions : 0;
}
const user1 = new User('usr123', 'Max', 4);
const user2 = new User('usr125', 'Ben'); // default questions value would be 0
const isUser = user1 instanceof User; // true

Prototype is a special object which can be used on Objects which has a constructor function (Well, all objects are descendant of Object, but let's leave this aside for a moment). The basic idea is - if I have 100 user objects - I might have some use for have a special properties or logic which relevant for all of them, and not specific for a single instance. For example, let's assume that in case of error, I would like to log all the data of the users.

I can create a special function which get and object and do this:

function userToString(user) {
   return user.id + ':' + user.name + '[' + user.questions + ']'; // usr123:Max[4]
}

This would work, but harder to maintain, since it is not really part of "User". I large projects I would probably put this function in a file with other utilities function, and call it every time i would like to use it. Another option is to include it as part of the prototype:

User.prototype.toString() {
   return this.id + ':' + this.name + '[' + this.questions + ']'; 
}
user1.toString(); // usr123:Max[4]

I would strongly suggest to using ES6 standard (at least). It's exist for several years, it looks much more intuitive and do some of the complex work for you.

In ES6 this code would look like this:

class User {
  constructor(id, name, questions) {
    this.id = id;
    this.name = name;
    this.questions = questions ? questions : 0;
  }

  toString() {
     return this.id + ':' + this.name + '[' + this.questions + ']'; 
  }
}

Look nicer isn't it? but it basically the same. This ES6 syntax is simply sugar coating for the older syntax you've included in your question.

Prototype (separately) and constructor (separately) on real examples from sites?

1 Answers1