Skip to main content

Object Oriented JavaScript - Part I

What is JavaScript?


JavaScript is a prototype based scripting language with dynamic typing and has first-class functions. Previously it is mostly used in web and mobile browser application development. These days it is used for performing server side operation. The best example is Node JS.

What is static and dynamic languages?


In static languages, the process of verifying & enforcing constraints of type and identifying the behaviour of the code can happens at compile time itself. Some of the static languages are Java, C#, etc.,

In dynamic languages the above process is can happens only at run time. This feature will helps to include new code, modifying type systems, and extending objects at run time.

What is first-class functions?


In many languages like Java and C# have some options for defining class. For an example, this is my Person class in Java.
class Person {
  String firstName;
  String lastName;
}
In JavaScript we don't have any keyword like "class" for defining classes. In JavaScript all functions are considered as a class. So we can define a class by using function in JavaScript and this is called as first-class functions. The equivalent Person class in JavaScript is written by something like this.
function Person() {
  this.firstName;
  this.lastName;
}
Object oriented programming has lot of features like Encapsulation, Polymorphism, and Inheritance. It is possible in JavaScript for achieving all the OOP features and for becoming a better JavaScript programmer, we should know that.

Public, Privileged and Private members in JavaScript.


The public members are always visible to public means any functions can read, modify and delete members, or add new members of the object. There are two ways for putting members in a new object.

By using constructor - This way commonly used for initializing public member variables. For an example,

function Person(fname, lname) {
  this.firstName = fname;
  this.lastName = lname;
}
By using prototype - This way commonly used for adding public member to an object. For an example,
Person.prototype.getFirstName = function() {
  return this.firstName;
}
Person.prototype.getLastName = function() {
  return this.lastName;
}
Person.prototype.setFirstName = function(fname) {
  this.firstName = fname;
}
Person.prototype.setLastName = function(lname) {
  this.lastName = lname;
}

Lets see how to create an object  and invoke member function.

var person1 = new Person('Suriya', 'A');
person1.getFirstName(); //Result = Suriya
person1.setFirstName('Gnana');
person1.getFirstName(); //Result = Gnana

We have created public members in javaScript. Lets discuss a way for creating private members in JavaScript and this is a way for encapsulating data from outside.

function Person(fname, lname) {
 var firstName = fname; //Private variable 1

 var lastName = lname; //Private variable 2

        var fullName = function() { //Private function 1
  return firstName + ', ' + lastName;
 }

 this.setFirstName = function(fname) { //Privileged method 1
  firstName = fname;
 }

 this.setLastName = function(lname) { //Privileged method 2
  lastName = lname;
 }

 this.getFirstName = function() {//Privileged method 3 
  return firstName;
 }

 this.getLastName = function() { //Privileged method 4 
  return lastName;
 }

 this.getFullName = function() { //Privileged method 5
  return fullName();
 }
}

Privileged methods can have access for private variables and methods. It is possible to delete or replace a privileged method but we can't alter this method or we can't force this method for displaying internal information of an object. Lets test the Person class by creating new object and invoking its methods.

var person1 = new Person('Suriya', 'A');
person1.getFullName(); // Result - Suriya , A

The private members are defined by without using "this" and they are declared like a normal variable declaration in JavaScript. Here the variables firstName and lastName are private variables and that are not accessible from outside of an object. For an example, we can't access the firstName and lastName property directly by executing below code.

person1.firstName; // Result - undefined

We know JavaScript is a dynamic language that allows to modify the object at run time. What I am going to do is, after creating an object for a Person class, going to override some of the privileged member functions of an object and trying to get access of the private variables. The pure object oriented programming won't allow to access private variables, but it is a time to test JavaScript.

var person1 = new Person('Suriya', 'A');
person1.getFullName(); // Result - Suriya , A
person1.setFirstName = function(fname) { //
  firstName = fname;
}
person1.setFirstName('Gnana');
person1.getFirstName() //Result should be 'Suriya' not 'Gnana'. 

Check the below screen.


So in JavaScript we can't access private members from outside world without getting help from privileged or public methods.

Now we have created Public, Private and Privileged variables and methods in JavaScript. In my next part will explain about Inheritance and other object oriented implementations in JavaScript.

Comments

Popular posts from this blog

Ext JS 4 – Creating web page using Ext.container.Viewport class and region propery

The Ext.container.Viewport is used for creating general web page and region property is used for splitting web page into different parts. Ext.container.Viewport is a specialized container represents the viewable area of the application (the browser area). It render itself to the document body, there is no need for providing renderTo property and it automatically sizes itself to size of the browser viewport. The viewport also re-size the child elements based on view area(based on browser width and height). The default layout of the viewport is border layout and we can customize this property according to our requirements. The viewport does not provide any scrolling. If necessary, the child elements(generally panels) within viewport needs to provide a scroll feature by using autoScroll property. See the below example for better understanding. This is Home.js file placed into app/view folder. Ext.define('MyApp.view.Home', { extend : 'Ext.container.Viewport&#

Getting key/value pair from JSON object and getting variable name and value from JavaScript object.

 Hi, I had faced one issue like this. I have an JSON object but I don't know any key name but I need to get the all the key and corresponding value from JSON object using client side JavaScript. Suddenly I wondered whether it's possible or not, after that I had done lot of workaround and finally got this solution. See the below example.    function getKeyValueFromJSON() {     var jsonObj =  {a:10,b:20,c:30,d:50} ;     for ( var key in jsonObj) {       alert( "Key: " + key + " value: " + jsonObj[key]);     }  }  In this example I have created the one json array as string, and converted this string into JSON object using eval() function. Using for-each loop I got all the key value from jsonObj, and finally using that key I got the corresponding value.  Finally I got the alert like this,    Key: a value:10    Key: b value:20    Key: c value:30    Key: d value:50  During this workaround I got one more idea, using this same way I got

Simple Login Application Using Spring MVC and Hibernate – Part 1

 I hope developers working in web application development might hear about MVC architecture. Almost all technologies provide support for MVC based web application development, but the success is based on many factors like reusable of the code, maintenance of the code, future adaption of the code, etc..,  The success of the Spring MVC is “ Open for extension and closed for modification ” principle. Using Spring MVC the developers can easily develop MVC based web application. We don’t need any steep learning curve at the same time we need to know the basics of spring framework and MVC architecture. The Spring MVC consists of following important components. 1. Dispatcher servlet 2. Controller 3. View Resolver 4. Model Spring MVC - Overview  The overall architecture of Spring MVC is shown here.  1. When “Dispatcher Servlet” gets any request from client, it finds the corresponding mapped controller for the request and just dispatches the request to the corresponding contro