In JavaScript everything is an object, the functions, Strings, arrays, etc. But many developers use this language without really knowing these concepts of object oriented programming. There are two ways to create objects in JavaScript, one is through the object "Object" and the other one is using the brackets "{ }" and writing the property and the value inside of them. Let's see and example:

//creating an object
var obj = new Object(); 

//creating a property
obj.color = 0xffffff; //Hexadecimal number ~>16777215
obj.click = function(){
	//accessing the property color
	console.debug(this.color);
}
//calling the method click
obj.click();

//creating an object
var obj = {
	//creating a property
	color: 0xffffff,
	//this method belongs to the object obj
	click: function(){
		//therefore we can have access to the property color
		console.debug(this.color);
	}
}
//running the method click
obj.click();

The previous example shows how we can create an object in two different ways, this gives us the freedom to choose either one. It is important to remember that we cannot create new objects using the previous objects.

Creating objects

The concept "class" does not exist in JavaScript, we create and inherited objects from other objects, this concept is called "Prototypal inheritance". In JavaScript we can instantiate a function that it is used as the object's constructor, so remember that functions are objects too, let's see the next example:

//A function called Person (Object)
function Person(name,lastName){
	//Saving the name and last name in the context
	this.name = name;
	this.lastName = lastName;
}

//Creating an instance of the function (Object) Person
var john = new Person("John","Doe");
//Displaying the name and last name
console.debug(john.name+" "+john.lastName);
//this is an instance of the object Person
console.debug(john.constructor == Person);

In the last line of the previous example you can see we have a property "constructor", this property exists in every object and will always point back to the function that created it.

Public methods

The public methods are completely accessible to the people that will use our code and it will allow the object to commune with other objects by sharing or receiving information. To achieve these public methods, we need to understand the property "prototype", which is actually an object that acts as a base reference for all the copies made of its parent object, in other words all the properties and methods that contain the property "prototype" will be available on every instance of that object. Since the property "prototype" is an object, to add properties we do it just like any other object, the properties added will be completely public and accessible for everyone. Let's see the next example:

//Object Animal
var Animal = function(name){
	this.name = name;
}
//Adding a public method to the object Animal
Animal.prototype.getName = function(){
	//The context belongs to the created instance
	return this.name;
}
//Public method
Animal.prototype.setName = function(name){
	//changing the value of the property name
	this.name = name;
}

//Creating an instance of dog and cat
var dog = new Animal("Lucky");
var cat = new Animal("Milo");

//Calling the method getName
console.debug(dog.getName());

Conclusions

Creating instances, properties and public methods is a well known topic for many developers, but maybe for others is not, so the next chapter we will spend time learning how to hide properties and methods by making them private. If there's any questions or suggestions you can leave them in the comment's sections, we like to hear your opinions.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Learning Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!