ОПП и JavaScript

Наверняка многие знают что язык Javascript содержит встроенные объекты. Например: Array, Mart, String и т.д., вот более редко встречающиеся объекты в практике программирования Object, RegExp.

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

Для начала, возьмем классический пример, рисование геометрических фигур. Пусть нам необходимо с помощью js нарисовать в браузере точку, линию и прямоугольник.

Зададим в качестве первого класса, класс Point отвечающий за рисование точки. Он содержит один метод draw и два свойства x, y.

Code
Текст

  1. function Point() {
  2.        var _x;
  3.        var _y;
  4. }

  5. Point.prototype.draw = function(x,y) {
  6.    var div = document.createElement('div'); // Создаем элемент div
  7.    document.body.appendChild(div); // Внедряем его в DOM структуру документа
  8.        div.style.backgroundColor = "red"; // Делаем фон для div красным
  9.        div.style.height = "2px"; // Ширина 2 пикселя
  10.        div.style.width = "2px"; // Высота 2 пикселя
  11.        div.style.position = "absolute"; // Позиция в документе абсолютна
  12.        div.style.top = y + "px";  // Координата y в пикселях
  13.        div.style.left = x + "px"; // Координата x в пикселях
  14.        _x = x; // Запоминаем координату x
  15.        _y = y; // Запоминаем координату y
  16. }

Все уже можно рисовать точки в нашем браузере, достаточно вызвать следующий код

Code
Текст

  1.        var point = new Point;
  2.        point.draw(200, 200);
  3.        point.draw(340, 120);
  4.        point.draw(340, 120);

Теперь научимся рисовать линию. Для этого создадим новый класс Line, который будет наследоваться от класса Point

Code
Текст

  1. function Line() {
  2.    this.draw = function(x, y) {
  3.        var d = Math.max(Math.abs(x), Math.abs(y));
  4.        for (var i=0; i < d; i++) {
  5.                Line.prototype.draw(_x + x/d, _y + y/d);
  6.        }
  7.    }
  8. }
  9. Line.prototype = new Point();

Все объекты в JavaScript имеют свойство prototype. Prototype – ссылка на объект, из которого наследуется свойства, не являющиеся свойствами экземпляра.

Свойство prototype позволяет расширить функциональность нашего класса Line за счет функциональности класса Point. Это не полноценное наследование, больше это похоже на эмуляцию.

Все теперь можно начинать рисовать линии.

Code
Текст

  1.        var point = new Point;
  2.        point.draw(200, 200);
  3.        point.draw(340, 120);
  4.        point.draw(340, 120);

  5.        var line = new Line;
  6.        line.draw(100 , 200);

Осталось вести еще один класс Rectangle который будет рисовать нам прямоугольники, и все простейшая графическая библиотечка у нас уже есть.

Code
Текст

  1. function Rectangle(){
  2.    this.draw = function(x,y) {
  3.        Line.prototype.draw(x, 0);
  4.        Line.prototype.draw(0,  y);
  5.        Line.prototype.draw(-x, 0);
  6.        Line.prototype.draw(0, -y);
  7.    }
  8. }
  9. Rectangle.prototype = new Line();

Нарисуем прямоугольник шириной 100 и высотой 20 пикселей, левый верхний угол будет в точки (120, 30)

Code
Текст

  1.        var point = new Point;
  2.        point.draw(120, 30);

  3.        var rectangle = new Rectangle;
  4.        rectangle.draw(100 , 20);

И напоследок ссылка, нашёл ее когда готовил статью, хороший материал для глубокого понимание ООП для JavaScript

1 комментарий »

  1. Yarik

    Возможно я ошибаюсь, но в примере с Rectangle в собственной (экземплярной) функции draw вместо Line.prototype.draw должно быть Rectangle.prototype.draw

Оставить комментарий

CAPTCHA image