What is the difference between creating a method inside the constructor or inside the prototype property?

Asked

Viewed 92 times

3

When I see other programmers' JS code some define the methods within the constructors themselves others define the methods in the property prototype such as, for example:

function Mouse() {
   this.btnLeft = function() { // Método no construtor.
       alert('Click 1');
   }
}

Mouse.prototype.btnRight = function() { // Método na propriedade prototype.
   alert('Click 2');
};

What is the difference between defining a method for an object in the case of the two examples above, between the constructor and the property prototype? there is some relevance in using one or the other?

javascript

  • https://answall.com/questions/44191/qual-a-diferença-entre-utilizar-o-metodo-da-classe-o-prototype-javascript Hello, from what I could understand by the answer I found in the link above the big difference is in memory and uniqueness. also has this very cool Devmedia text on prototype that might help you ! https://www.devmedia.com.br/prototype-javascript/7063 I hope I helped you !!

  • 3

    This answers your question? What’s the difference between using the class method and the Javascript prototype?

  • It is not the main difference, but in the first case btnLeft will only exist for instances, that is to say, manipulating the "class" to overwrite it will be impossible in the way you did, whereas in the second the prototype is the object of the "class" (I am calling it a class but it is not quite the correct name)then the prototype returns an object that if modified will represent for all existing instances. There’s a little more to it, but I’ll see if you don’t have a more complete answer on the subject.

  • @Guilherme Nascimento, because on the property prototype shows the defined methods, but not the properties was not to demonstrate everything? since in the property prototype is defined the things that will be inherited?

  • Not only that, it’s much more, as I said in the prototype the behavior is different, in the first code only exists in instances, in the second there is an object that represents all instances of a class and even in the class (not in the instance) there will be an "object" inside that represents the interface of what you describe.

2 answers

0

Completing the answer

when an object receives a message (to access an attribute or a method), it is first checked if such a property exists in the object, if it does not exist, it goes to the prototype to see if it exists

when you change the prototype, Voce changes all instances of a class / function

when Voce changes in constructor, you only change to that instance

function A(val) { this.my_func = function() { return val; }};
A.prototype.my_func = function() { return "default"; };

a = new A(10);

A.prototype.my_other_func = function() { return "other"; };

a = new A(10);
b = new B(20);

a.my_func(); // retorna 10
a.my_other_func(); // retorna "other"
a.my_other_func = function () { return 100; };
a.my_other_func(); // retorna 100

b.my_func(); // retorna 20
b.my_other_func(); // retorna "other"

Note that:

  • the statement of my_other_func was made after the instance a be initialized and still works
  • I can still change the circumstances a without problems changing their methods
  • changes made to the Inst ado not affect the case b

0

With the prototype, your objects shared the same "table" of functions, (inheriting the prototype functions), while declaring the functions within the constructor will create pointer for each table of each instance, allows you to decide with loops whether or not to declare a function, or if it will be different from the other instance, they may also be individually superscripted after...

the prototype helps to standardize and decreases the use of memory...although it is very little...

[Obj][Obj][Obj][Obj]
  v    v    v    v
[prototype (ponteiro para função_1) (ponteiro para função_2)]

[Obj (ponteiro para função_1) (ponteiro para função_2)]
[Obj (ponteiro para função_1) (ponteiro para função_2)]
[Obj (ponteiro para função_1) (ponteiro para função_2)]
[Obj (ponteiro para função_1) (ponteiro para função_2)]

then, the prototype would be the 'Static' class, properties common to all instances, as in a language C like..., but as javascript is much more permissive than a compiled language, it is a little difficult to compare, I hope I helped..., although it seems a little confusing...

+OBS: properties can also be assigned to the prototype, since functions are actually treated as variable in javascript.

what makes the following scenario possible:

var minha_string="string qualquer";
String.prototype.CONSTANTE_TEXTO = "TEXTO";
console.log(minha_string.CONSTANTE_TEXTO);
console.log("outra string".CONSTANTE_TEXTO);
//sim, os dois retornaram "TEXTO" ao console

and the addition of hooks (Hooks) in already declared objects code, without having to access each one, which can be useful to find out how some code works...

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.