ОПП и JavaScript

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

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

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

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

function Point() {
	var _x;
	var _y;
}

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

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

    	var point = new Point;
    	point.draw(200, 200);
    	point.draw(340, 120);
    	point.draw(340, 120);

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

function Line() {
    this.draw = function(x, y) {
    	var d = Math.max(Math.abs(x), Math.abs(y));
    	for (var i=0; i < d; i++) {
    		Line.prototype.draw(_x + x/d, _y + y/d);
    	}
    }
}
Line.prototype = new Point();

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

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

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

    	var point = new Point;
    	point.draw(200, 200);
    	point.draw(340, 120);
    	point.draw(340, 120);

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

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

function Rectangle(){
    this.draw = function(x,y) {
        Line.prototype.draw(x, 0);
        Line.prototype.draw(0,  y);
        Line.prototype.draw(-x, 0);
        Line.prototype.draw(0, -y);
    }
}
Rectangle.prototype = new Line();

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

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

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

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