Javascript objects - it's all the same

Question

What is the difference with the code below

1) - are the first two constructors the same with another area?

2) is the third object, the same as the first two, if they were created as objects?

thank you for your help?

function StaffMember(name){ this.name = name; this.total = 0; this.discountPercent = function(){ //do stuff }; } StaffMember.prototype.calculateTax = function(){ //work out tax }; 

or

 var StaffMember = function(name){ this.name = name; this.discountPercent = function(){ //do stuff }; } StaffMember.prototype.calculateTax = function(){ //work out tax }; 

or

 var StaffMember { name:"", discountPercent:function(){ //do stuff }, calculateTax : function(){ //work out tax } } 

Answer 1

What's happening

  function StaffMember(name){ this.name = name; this.total = 0; this.discountPercent = function(){ //do stuff }; } StaffMember.prototype.calculateTax = function(){ //work out tax }; 

This creates a constructor function and adds another function to its prototype. If you then call new StaffMember("bob") , it will create an object with the local property name set to bob , the total value of the local property is 0, the local discountPercent function and the static function calculateTax

 var StaffMember = function(name){ this.name = name; this.discountPercent = function(){ //do stuff }; } StaffMember.prototype.calculateTax = function(){ //work out tax }; 

This is equivalent to the above, except for the full property. Note that you have not yet created an instance of this StaffMember object, which I think you are trying to create. You just defined functon and put another function on your prototype

 var StaffMember { name:"", discountPercent:function(){ //do stuff }, calculateTax : function(){ //work out tax } } 

This syntax is not valid, you need = after StaffMember, but otherwise it will create an object with the name, discount, and calculateTax parameters.

This object will actually exist, since you created it directly, for others you will need to call var something = new StaffMember() .

Differences

There is no significant difference between 1 and 2, except for those where these things are defined in the function (the first example will be raised to the top of the current scope, the second example will not be set to this point in the code).

As soon as you call new StaffMember() , there will be some differences between the created object and the object that you create directly in the third example.

The most significant is that the prototype object will be used together with the objects instead of creating a new one when creating a new object. This is not very important, since you just turned on the function, so the actual performance will be the same, but it will save some memory, and it will act differently if you put the object in an array on the prototype.

Answer 2

For the first 2 functions, when they are called (constructors), they create objects. However, both of them share a function in the prototype calculateTax . The latter is already an object, a literal of an object that has data and functions.

 function StaffMember(name){ this.name = name; this.total = 0; this.discountPercent = function(){ //do stuff }; } StaffMember.prototype.calculateTax = function(){ //work out tax console.log(this.total); }; var objStaffMember = new StaffMember("User"); objStaffMember.total = 50; objStaffMember.calculateTax(); 

Although the created objects will share the calculateTax function, when the function is actually called the this context inside the calculateTax prototype function, there will be the very object on which it is called. those. objStaffMember in the above case.

There is a slight difference in the first function 2, because the second does not have a name and has a purpose, this is an expression of a function without a name, and the first is a function declaration and has a name.