Учебники

9) Объектно-ориентированный JS

Май 29, 2020

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

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

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

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

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

ИЛИ 

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

{ lines of code} };

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

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

objectname.propertyname;

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

objectname.methodname();

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

1
<html>
2
<head>
3
    <title>Objects!!!</title>
4
    <script type="text/javascript">
5
      var student = new Object();
6
      student.fName = "John";
7
      student.lName = "Smith";
8
      student.id = 5;
9
      student.markE = 76;
10
      student.markM = 99;
11
      student.markS = 87;
12
      student.calculateAverage = function()
13
      {
14
        return (student.markE + student.markM + student.markS)/3;
15
      };
16
      student.displayDetails = function()
17
      {
18
        document.write("Student Id: " + student.id + "<br />");
19
        document.write("Name: " + student.fName + " " + student.lName + "<br />");
20
        var avg = student.calculateAverage();
21
        document.write("Average Marks: " + avg);
22
      };
23
        student.displayDetails();
24
    </script>
25
</head>
26
<body>
27
</body>
28
</html>

OOPS Конструктор

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

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

1
<html>
2
<head>
3
    <script type="text/javascript">
4
        function Student(first, last, id, english, maths, science)
5
        {
6
          this.fName = first;
7
          this.lName = last;
8
          this.id = id;
9
          this.markE = english;
10
          this.markM = maths;
11
          this.markS = science;
12
          this.calculateAverage = function()
13
          {
14
             return (this.markE + this.markM + this.markS)/3;
15
          }
16
          this.displayDetails = function()
17
          {
18
            document.write("Student Id: " + this.id + "<br />");
19
            document.write("Name: " + this.fName + " " + this.lName + "<br />");
20
            var avg = this.calculateAverage();
21
            document.write("Average Marks: " + avg + "<br /><br />");
22
          }
23
        }
24
        var st1 = new Student("John", "Smith", 15, 85, 79, 90);
25
        var st2 = new Student("Hannah", "Turner", 23, 75, 80, 82);
26
        var st3 = new Student("Kevin", "White", 4, 93, 89, 90);
27
        var st4 = new Student("Rose", "Taylor", 11, 55, 63, 45);
28
        st1.displayDetails();
29
        st2.displayDetails();
30
        st3.displayDetails();

Цикл по свойствам объекта

Синтаксис:

for (variablename in objectname)

{

lines of code to be executed

}

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

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

1
<html>
2
<head>
3
    <script type="text/javascript">
4
        var employee={first:"John", last:"Doe", department:"Accounts"};
5
        var details = "";
6
        document.write("<b>Using for/in loops </b><br />");
7
        for (var x in employee)
8
        {
9
          details = x + ": " + employee[x];
10
          document.write(details + "<br />");
11
        }
12
    </script>
13
</head>
14
<body>
15
</body>
16
</html>

 

55
Share: