JavaScript: Классы или скриптовый ООП

Сегодня речь пойдет о том, как использовать «ООП» в языке JavaScript. А именно об использовании и создании классов. Рассматривать это мы будем на примере класса Point (Точка).

На самом деле понятия класса в языке программирования JS нет, а есть понятие объекты. Именно они помогают в структурировании кода и использовании «классов» в нашем привычном понимании. Для того чтобы начать использовать привычные конструкции типа ИМЯ_ОБЪЕКТА.МЕТОД существует два подхода.
Первый подход, грубо говоря, позволяет реализовать статический класс. По своей натуре это и есть использование javascript объекта во всей красе. Например:

  var myStaticPointClass = {
    x: 0,
    y: 0,
    sayX: function() {
        alert(this.x);
    },
    sayY: function() {
        alert(this.y);
    },
    set: function(x, y) {
        this.x = x;
        this.y = y;
    }
  }
  
  myStaticPointClass.sayX();
  myStaticPointClass.sayY();
  myStaticPointClass.set(5, 10);
  myStaticPointClass.sayX();
  myStaticPointClass.sayY();

Как видно из примера, объект в js задается с помощью фигурных скобок. Внутри этих скобок через запятую указываются атрибуты объекта по принципу ИМЯ:ЗНАЧЕНИЕ. Как и полагается языку JavaScript «ЗНАЧЕНИЕ» может быть как одним из типов данных, так и функцией. Отличительной особенность данного подхода является то, что все вызовы осуществляются через переменную объекта (в нашем случае myStaticPointClass). И доступен только один экземпляр данного объекта. Т.е. мы не можем написать:

var p1 = new myStaticPointClass(); 
var p2 = new myStaticPointClass();

Другими словами, если Вам нужно будет решить задачу, где нужно использовать несколько точек… это решение будет неверным. Можно конечно, создать внутри класса массив, и работать с ним, но это уже другая история. Для решения задачи с множеством точек существует второй подход реализации класса на языке JavaScript. Рассмотрим его на примере:

  var myPointClass = function(x, y) {
    this.x = x;
    this.y = y;
  }
  myPointClass.prototype.sayX = function() {
    alert(this.x);
  }
  myPointClass.prototype.sayY = function() {
    alert(this.y);
  }
  
  var p1 = new myPointClass(1, 2);
  p1.sayX();
  var p2 = new myPointClass(5, 10);
  p2.sayY();

Как видно из последних строчек примера, данный подход более привычен. Суть данного подхода заключается в том, что сначала мы создаем описание класса, а точнее всех его атрибутов. Причем описание это мы создаем «на лету» (для обозначения внутренних атрибутов «класса» используется ключевое слово this). Далее мы описываем необходимые нам методы. Делается это путем расширения прототипа объекта привычным способом. А именно указывается объект, затем ключевое слово prototype, а далее имя нового метода (или переменной). Таким образом, в нашем случае, мы создали два метода для отображения значения x и y. После описания объекта таким образом, мы можем работать с ним как с классом в нашем привычном понимании и создавать сколько угодно экземпляров, которые не будут переписывать значения друг друга.

Запись опубликована в рубрике JavaScript с метками , , , , , , , , , , , , , , . Добавьте в закладки постоянную ссылку.