Учебное пособие по объектно-ориентированному JavaScript (OOJS) с примером

Что такое концепция OOPS в JavaScript?

Во многих случаях переменных или массивов недостаточно для моделирования реальных ситуаций. JavaScript позволяет создавать объекты, которые действуют как объекты реальной жизни. Студент или дом могут быть объектом, имеющим множество уникальных характеристик. Вы можете создавать свойства и методы для своих объектов, чтобы упростить программирование. Если ваш объект — студент, он будет иметь такие свойства, как имя, фамилия, идентификатор и т. д., а также такие методы, как CalculationRank, ChangeAddress и т. д. Если ваш объект — дом, он будет иметь такие свойства, как количество комнат, цвет краски, местоположение и т. д. и такие методы, как CalculArea, ChangeOwner и т. д.

Как создать объект

Вы можете создать такой объект:

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} };

Доступ к свойствам и методам объекта

Вы можете получить доступ к свойствам объекта следующим образом:

objectname.propertyname;

Вы можете получить доступ к методам объекта следующим образом:

objectname.methodname();

Попробуйте этот пример самостоятельно:

<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>

УПС Конструктор

Но создавать объекты такого типа не так уж полезно, потому что и здесь вам придется создавать разные объекты для разных учеников. Здесь появляется конструктор объектов. Конструктор объектов помогает вам создать тип объекта, который можно повторно использовать для удовлетворения потребностей отдельного экземпляра.

Попробуйте этот пример самостоятельно:

<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>

Перебор свойств объекта

Синтаксис:

for (variablename in objectname)

{

lines of code to be executed

}

Для/в поиска обычно используется для перебора свойств объекта. Вы можете дать любое имя для переменная, но имя объекта должно совпадать с именем уже существующего объекта, который вам нужно пройти.

Попробуйте этот пример самостоятельно:

<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>