Введение в объектно-ориентированный JavaScript

Written on 06 Июля 2013. Posted in HTML, CSS, JavaScript

Введение

Многие программисты JavaScript игнорируют или не знают о возможности писать объектно-ориентированный JavaScript. Хоть и не стандартный объектно-ориентированный язык, JavaScript является основанным на прототипах языком, а значит, унаследованные классы не наследуются прямо от базового класса, а создаются путем клонирования базового класса, служащего в качестве прототипа. Это можно выгодно использовать при реализации инкапсуляции, наследования и полиморфизма на JavaScript, тем самым создавая ощущение объектной ориентации.

Объектно-ориентированный JavaScript имеет несколько преимуществ. Так как это интерпретируемый язык, то методы и свойства могут добавляться к классу в любое время и не обязаны быть объявленными в конструкторе класса, как в других объектно-ориентированных языках, таких как C++. Так как JavaScript поддерживает переменные типы данных, свойства класса не обязательно должны иметь фиксированный тип данных (такой как Boolean или string) и могут меняться в любое время. Более того, объектно-ориентированный JavaScript более гибок и эффективен, чем процедурный JavaScript, так как объекты полностью поддерживают инкапсуляцию и наследование, и полиморфизм реализуется с помощью свойства prototype.

Предпосылки

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

Основные понятия

Ниже перечислено несколько основных понятий, используемых в данной статье:

•    Класс: Определение объекта, включающее его методы и свойства.
•    Инкапсуляция: Когда данные, передаваемые внутри экземпляра объекта, остаются заключенными внутри экземпляра этого объекта. При создании нового экземпляра объекта для него создается новый набор данных.
•    Наследование: Когда объект становится "дочерним" объектом или подклассом другого класса, и свойства и методы родительского класса применяются к подклассу.
•    Полиморфизм: Когда подкласс класса может вызвать ту же самую обобщенную унаследованную функцию в своем собственном контексте.
•    Свойство: Переменная, относящаяся к классу.
•    Метод: Функция, относящаяся к классу.

Простой класс на JavaScript

Определение класса

Типовой класс очень легко реализуется на JavaScript. Чтобы определить класс, надо лишь объявить function(функцию):

<script language="Javascript">
..

function MyClass()
{
}

..
</script>

Эти три строки кода создают новый объект по имени MyClass, экземпляры которого создаются с помощью оператора new(новый), например:

var c = new MyClass();

Функция MyClass также служит конструктором класса, и когда новый экземпляр этого класса вызывается с оператором new, вызывается данная функция.

Создание свойств класса

Пока этот код является лишь простым классом с одним объявленным конструктором. Для добавления свойств к классу используется оператор this, за которым следует имя свойства. Как отмечалось ранее, методы и свойства могут создаваться везде в JavaScript, а не только в конструкторе класса. Ниже приведен пример добавления свойств к MyClass.

..

function MyClass()
{
  this.MyData = "Some Text";
  this.MoreData = "Some More Text";
}

..

Обратиться к этим свойствам можно так:

var c = new MyClass();
alert(c.MyData);

Данный фрагмент кода добавляет свойства MyData и MoreData к классу. К ним можно обратиться везде внутри конструктора класса и методов класса с помощью оператора this, поэтому к MyData можно обратиться с помощью this.MyData. Также имейте в виду, что в отличие от некоторых объектно-ориентированных языков, к свойствам класса обращаются с помощью ., а не ->. Причина состоит в том, что JavaScript не различает указатели и переменные. Если ссылка на класс сохраняется в переменную при создании, то к свойствам класса можно обращаться по имени переменной, за которой следует., затем имя свойства класса, в данном примере myData, к которому обращаются с помощью c.MyData.

Создание методов класса

Как сказано выше в статье, методы класса создаются с помощью свойства prototype. Когда метод создается в классе в JavaScript, метод добавляется к объекту класса с помощью свойства prototype, как показано в следующем фрагменте кода:

..

function MyClass()
{
  //Любые свойства создаются здесь
}

MyClass.prototype.MyFunction = function()
{
  //Код функции здесь
}

..

Для ясности метод здесь создается с помощью = function(). Помимо этого, метод может быть создан путем объявления function MyClass.prototype.MyFunction(). Этот код делает MyFunction методом MyClass с помощью свойства prototype. Это затем дает MyFunction доступ к любым другим методам или свойствам, созданным в MyClass с помощью оператора this operator. Например:

..

function MyClass()
{
  this.MyData = "Some Text";
}

MyClass.prototype.MyFunction = function(newtext)
{
  this.MyData = newtext;
  
  alert("New text:\n"+this.MyData); 
}

..

Этот кусок кода создает класс MyClass, затем создает свойство по имени MyData в конструкторе класса. Метод по имени MyFunction затем добавляется к объекту MyClass с помощью оператора prototype, чтобы он мог обращаться к свойствам и методам MyClass. В этом методе MyData меняется на newtext, являющийся единственным аргументом метода. Это новое значение затем отображается с помощью окна предупреждения.

Вперед >

html форум

Введение в объектно-ориентированный JavaScript

ОГЛАВЛЕНИЕ

Оглавление