Object-oriented features of JavaScript

If you program using JavaScript, you may doubt whether it contains an object-oriented (OO) structure. In fact, JavaScript does support an object-oriented architecture-to some extent. This article describes the Javascript oo structure through an example of Scalable Vector Graphics (SVG.

 

How do I define methods and attributes in a class?

 

A basic aspect of OO development is the use of classes and their corresponding methods and/or attributes. Javascript supports the use of classes (and their attributes) through the function keyword. The followingCodeDefines a javascript class called figure:
Function figure (){
This. centerx = 0;
This. centery = 0;
This. Area = 0;
This. Transform = transform; // methods are defined like this
Function Transform (movex, Movey, angle ){
This. centerx + = movex;
This. centery + = Movey;
}}

This figure class has three attributes: centerx, centery, and area. In addition, it also has a method called transform (). The first three rows are constructors of this class.
But it does not look like a class
You will think that figure () does not look like a class, but is more like a JavaScript function. So why does figure () define a class?

Strictly speaking, the figure () function does not define a class, but it impersonates a class. It actually creates an object, and the code in the brackets makes the object constructor. The support for JavaScript objects is very basic, and it does not distinguish between classes and objects.
This leads to the question why the figure () function creates an object. Objects can have attributes and methods. Basically, because the figure () function contains both attributes and methods, it is an object. In JavaScript, all functions are called object and callable code blocks. This is not as easy to misunderstand as it sounds. To create a figure () Class/object, you only use the following syntax:
Myfigure = new figure ();
You can also call the figure () function as a code block, like this:
Figvalue = figure ();
The variable figvalue is not defined because the code block figure () does not return any value. If you add return (this. Area) to the last row of the function, the value of figvalue is 0. Therefore, figvalue is a type number, and myfigure is an instance of the object rectangle.
Why is "this" before all variables "?

This keyword indicates that this is an instance variable of the object and can be accessed from outside the object using myfigure. centerx. To make the variable private, remove the prefix this. This. Transform = transform makes the method A public method. This method is called through myfigure. Transform (100,100, 0.

Are these classes hierarchical?

Another good question is whether JavaScript classes are divided into layers. The answer is yes. Let's take a closer look at how to achieve layering. We can define a rectangle subclass and use figure as the parent class:

Function rectangle (startx, starty, endx, Endy ){
This. width = endx-startx;
This. Height = Endy-starty;
This. centerx = (endx + startx)/2;
This. centery = (Endy + starty)/2;
This. computearea = computearea;
Function computearea (){
This. Area = This. Width * This. height;
}}
Rectangle. Prototype = new figure ();

The rectangle object is created with four independent variables, and the first four rows are constructors. The rectangle class contains a method: computearea (). The last rectangle. Prototype = new figure (); line defines the rectangle class as a subclass inherited from the figure class.
Let me explain prototype ). Each object constructor has the prototype attribute, which is used to add new attributes and methods to all objects. This is why the prototype is used to implement inheritance: child. Prototype = new parent ();. Through the prototype, all attributes and methods of the parent object are added to the sub-object.
Note that this. centerx, this. centery, and area are the attributes used in the rectangle class, but they are the attributes of the figure parent class. Similar to the rectangle class, the circle class can be defined as a prototype of the Figure Class. This type of parent-child relationship can be defined as needed; you can create another subclass of rectangle.
How do I create a class instance?

It is easy to create a class instance in javascript:
Rect = new rectangles (100,100,900,800 );
This creates an object of the rectangle type. The rectangle constructor fills in values in the attributes width, height, centerx, and centery. The value of the rect. Area attribute is zero (0 ). Use this command to call the area method:
Rect. computearea ();
The value of rect. area is 560,000 now. To call the transform method, use:
Rect. Transform (100,200, 0 );

The attributes of parent and child objects can be accessed as follows:
VaR AR = rect. area;
VaR Wi = rect. width;

Can I go beyond attributes and methods?

Just like in Java, You can go beyond attributes and methods. The attributes or methods defined in child classes can be attributes and methods of parent classes with the same name.
Interaction with global variables
Javascript also supports the use of global variables. Test the range of the g_area variable in the following code segment:
<HTML>
<SCRIPT>
VaR g_area = 20;
Function figure (){
...
This. Area = g_area;
...
}
Function rectangle (){... }
Rectangle. Prototype = new figure ();
Function Test (){
G_area = 40;
Rect = new rectangle ();
Alert (rect. area );
}
</SCRIPT>
<Body onload = 'test () '/>
</Body>
</Html>
The value of rect. area is 20 (not your expected 40), because the rectangle object is the prototype of the figure object, which is defined before the test () is called. To use the new value of g_area, you need to use the following method:

Function Test (){
G_area = 40;
Rectangle. Prototype = new figure ();
Rect = new rectangle ();
Alert (rect. area );
}

For all new rectangle instances, this will change the value of the Area attribute. Alternatively, you can use this method: function test (){
G_area = 40;
Rect = new rectangle ();
Rectangle. Prototype. Area = g_area;
Alert (rect. area );
}

This changes the value of the Area attribute of all existing and new instances of rectangle.
Conclusion

To emulate OO development, JavaScript provides the required inheritance, encapsulation, and Transcendence attributes, although it does not support overloading of interfaces and methods. If you are new to OO development, try it. The oo concept allows developers to centralize a set of data and related operations into an object. This is useful when managing browser events and managing SVG images in the browser.