Objects in JavaScript

JavaScript provides a ton of ways to use object-oriented programming. For this there are the following techniques:

• New operator
• Literal notation
• Object constructors
• Prototypes
• Associative arrays

Use the new operator

This is probably the easiest way to create an object. You simply create the name of the object and equate it with the new Javascript object.
')

 // Create our object
 var MyObject = new Object ();
 // Variables
 MyObject.id = 5;  // Numeric property
 MyObject.name = "Sample";  // String property
 // Functions
 MyObject.getName = function ()
 {
     return this.name;
 } 

The disadvantage of this method is that you can work with only one newly created object.

 // Use our object
 alert (MyObject.getName ()); 

Literal notation

Literal notation is a somewhat unusual way of defining new objects, but easy enough to understand. Literal notation works with Javascript 1.3.

 // Create our object using literal notation
 MyObject = {
     id: 1,
     name: "Sample",
     boolval: true
     getName: function ()
     {
         return this.name;
     }
 } 

As you can see, it is quite simple.

 Object = {
 id: value;
 ...
 } 

To use this is quite easy.

 alert (MyObject.getName ()); 

Object constructors

Object constructors are a powerful tool for creating objects that can be used many times. The object constructor is, in fact, a regular Javascript function, to which various parameters can also be passed.

 function MyObject (id, name)
 {

 } 

If we draw parallels with OOP, then this is a constructor function. With it, we will create our object.

 var MyFirstObjectInstance = new MyObject (5, "Sample");
 var MySecondObjectInstace = new MyObject (12, "Othe Sample"); 

Thus, we created different instances of the object. Now we can work separately with each instance of the MyObject object, without fear that by changing the properties of one instance, we will affect the properties of another instance.


As in OOP, MyObject can have methods and various properties. Properties can be assigned default values ​​or values ​​passed by the user in the object's constructor.

 function MyObject (id, name)
 {
     // User submitted values
     this._id = id;
     this._name = name;
     // Default value
     this.defaultvalue = "MyDefaultValue"; 
 } 

Similarly, we can create functions.

 function MyObject (id, name)
 {
     this._id = id;
     this._name = name;
     this.defaultvalue = "MyDefaultValue"; 
    
     // Get the current value
     this.getDefaultValue = function ()
     {
         return this.defaultvalue;
     }
    
     // Set New Value
     this.setDefaultValue = function (newvalue)
     {
         this.defaultvalue = newvalue;
     }
    
     // Arbitrary function
     this.sum = function (a, b)
     {
         return (a + b);
     }
 } 

I believe that this is one of the most powerful Javascript mechanisms.

Use prototypes

Javascript prototypes appeared with JavaScript1.3 / JScript2.0 / ECMAScript 3rd Edition. Using prototypes, you can add new properties and parameters to existing objects.

 Object - Class - Class Instance 

The illustration shows that an instance of a class inherits all the properties and methods of the class, which, in turn, inherits the properties and methods of the object on which the class was created.


Creating an object here is no different from a similar process when creating an object using constructors.

 function MyObject (id, name)
 {
     // Set Values
     this._id = id;
     this._name = name;
 } 

If suddenly we want to create a new property for the MyObject object, then we can do it as follows:

 var MyInstance = new MyObject (5, "some value");
 MyInstance.newproperty = true; 

As you can see, creating a new property for an object is not difficult, but it will be available only on this instance and will not be distributed to others. To solve this problem, it is worth using prototypes.

 var MyInstance = new MyObject (5, "some value");
 MyInstance.prototype.newproperty = false;
 MyInstance.newproperty = true; 

This is not the best solution for using prototypes — it's just an example. Why is this not the best solution? Because the code will be difficult to maintain if the properties of the objects are not as expected (in the object itself), but in an arbitrary place in the script.


Properties created through prototypes can be set to defaults. Subsequently, they can be overwritten (this was shown in the previous example).


As expected, in addition to properties, you can create methods. Here is a simple example of how to do this.

 // Use our <b> object </ b>, not the <b> instance </ b>.
 MyObject.prototype.getId = function ()
 {
     return this._id;
 } 

The prototyping mechanism is powerful not only in the capabilities listed above, but also because you can enhance your own Javascript objects, such as String, Array, and others. I will give a simple example:

 // function to get the number of words in a string
 function getWordsCount ()
 {
     return this.split ("") .length;
 }

 // Assign a function to the prototype
 String.prototype.getWordsCount = getWordsCount;

 // Example of use:
 var mystring = "My Test String";
 alert (mystring.getWordsCount ());  // Must display the number 3 

Associative arrays

In addition to standard methods, there are quite exotic, such as the creation of associative arrays. This will be useful for organizing a large number of similar objects.

 var MyObject = new Array ();
 MyObject ["id"] = 5;
 MyObject ["name"] = "SampleName"; 

So, we looked at how to create objects using Javascript. The choice of which method to use falls entirely on the programmer and should correspond to the current task.