Tutorial de JavaScript orientado a objetos (OOJS) con ejemplo

¿Qué es el concepto OOPS en JavaScript?

Muchas veces, las variables o matrices no son suficientes para simular situaciones de la vida real. JavaScript te permite crear objetos que actúan como objetos de la vida real. Un estudiante o una casa pueden ser un objeto que tenga muchas características propias y únicas. Puede crear propiedades y métodos para sus objetos para facilitar la programación. Si su objeto es un estudiante, tendrá propiedades como nombre, apellido, identificación, etc. y métodos como cálculo.lateRank, changeAddress, etc. Si su objeto es una casa, tendrá propiedades como una cantidad de habitaciones, color de pintura, ubicación, etc. y métodos como calcularArea, changeOwner, etc.

Cómo crear un objeto

Puedes crear un objeto como este:

var objName = new Object();
objName.property1 = value1;
objName.property2 = value2;
objName.method1 = function()
{
line of code
}

OR

var objName= {property1:value1, property2:value2, method1: function()

{ lines of code} };

Acceder a propiedades y métodos de objetos

Puede acceder a las propiedades de un objeto como este:

objectname.propertyname;

Puede acceder a métodos de un objeto como este:

objectname.methodname();

Pruebe este ejemplo usted mismo:

<html>
<head>
	<title>Objects!!!</title>
	<script type="text/javascript">
      var student = new Object();
      student.fName = "John";
      student.lName = "Smith";
      student.id = 5;
      student.markE = 76;
      student.markM = 99;
      student.markS = 87;
      student.calculateAverage = function()
      {
      	return (student.markE + student.markM + student.markS)/3;
      };
      student.displayDetails = function()
      {
        document.write("Student Id: " + student.id + "<br />");
        document.write("Name: " + student.fName + " " + student.lName + "<br />");
        var avg = student.calculateAverage();
        document.write("Average Marks: " + avg);
      };
		student.displayDetails();
	</script>
</head>
<body>
</body>
</html>

OOPS Constructor

Pero crear objetos de este tipo no es tan útil porque aquí también tendrás que crear diferentes objetos para diferentes estudiantes. Aquí entra en escena el constructor de objetos. El constructor de objetos le ayuda a crear un tipo de objeto que puede reutilizarse para satisfacer las necesidades de una instancia individual.

Pruebe este ejemplo usted mismo:

<html>
<head>
	<script type="text/javascript">
		function Student(first, last, id, english, maths, science)
        {
          this.fName = first;
          this.lName = last;
          this.id = id;
          this.markE = english;
          this.markM = maths;
          this.markS = science;
          this.calculateAverage = function()
          {
         	 return (this.markE + this.markM + this.markS)/3;
          }
		  this.displayDetails = function()
		  {
            document.write("Student Id: " + this.id + "<br />");
            document.write("Name: " + this.fName + " " + this.lName + "<br />");
            var avg = this.calculateAverage();
            document.write("Average Marks: " + avg + "<br /><br />");
		  }
		}
        var st1 = new Student("John", "Smith", 15, 85, 79, 90);
        var st2 = new Student("Hannah", "Turner", 23, 75, 80, 82);
        var st3 = new Student("Kevin", "White", 4, 93, 89, 90);
        var st4 = new Student("Rose", "Taylor", 11, 55, 63, 45);
        st1.displayDetails();
        st2.displayDetails();
        st3.displayDetails();
        st4.displayDetails();
	</script>
</head>
<body>
</body>
</html>

Recorrer las propiedades de un objeto

Sintaxis:

for (variablename in objectname)

{

lines of code to be executed

}

El para/en un loops Generalmente se usa para recorrer las propiedades de un objeto. Puedes darle cualquier nombre al variable, pero el nombre del objeto debe ser el mismo que el de un objeto ya existente que necesita recorrer.

Pruebe este ejemplo usted mismo:

<html>
<head>
	<script type="text/javascript">
		var employee={first:"John", last:"Doe", department:"Accounts"};
        var details = "";
        document.write("<b>Using for/in loops </b><br />");
        for (var x in employee)
        {
          details = x + ": " + employee[x];
          document.write(details + "<br />");
        }
	</script>
</head>
<body>
</body>
</html>