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

ОГЛАВЛЕНИЕ

Введение в написание объектно- ориентированных структур на JavaScript

•    Скачать примеры - 7.04 Кб

Оглавление

  • Введение
    • Предпосылки
    • Основные понятия
  • Простой класс на 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, являющийся единственным аргументом метода. Это новое значение затем отображается с помощью окна предупреждения.

Читайте также:
  • Создание средства просмотра XML с помощью JScript – создание мощных скриптов в Exsead XML
    •    Скачать исходники - 19.01 KB Введение В данной статье на основе Exsead создается парсер JScript DOM и GUI просмотра XML. Краткая информация о Exsead Etc. Основные принципы устройства Exsead изложены здесь. Чтобы данная статья принесла максимум пользы, следует прочитать статью об использов...
  • Расширение встроенных объектов JavaScript при помощи прототипов
    ВведениеМожно использовать свойство prototype (прототип) некоторых встроенных объектов JavaScript для расширения их функциональности. Новые экземпляры конкретного класса объектов наследуют поведение, заданное классу. Если вы знаете C++, рассматривайте расширенные объекты как производные классы с...
  • Графическое дерево JavaScript с Layout
    Рисунок 1. Пример с конкретными цветами, обработанными при помощи VML в Internet Explorer. Рисунок 2. Пример с конкретными цветами, обработанными при помощи холста (canvas) в Firefox. Рисунок 3. Пример, демонстрирующий свернутые и выбранные узлы, обработанные посредством VML в Internet Exp...
  • JavaScript для новичков
    Вложения и включенияДавайте сначала рассмотрим простой пример:<html><head><title>This is a JavaScript example</title><script language="JavaScript"><!--document.write("Здравствуй мир!");//--></script></head><body> Привет! </...
  • Примеры JavaScript
    Как узнать ширину и высоту клиентской (рабочей) области окна браузера? <script type="text/javascript">//IE5+, Mozilla 1.0+, Opera 7+function getClientWidth(){  return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document...