Автор: Анна Черножукова

Часть 1. Создание объектов с помощью Mootools

В этой статье мы рассмотрим основы объектно-ориентированного подхода в JavaScript при помощи фреймворка Mootools: как создаются классы, как создаются экземпляры классов, методы. Class — специальный объект в Mootools, он является одним из базовых. Все классы создаются с помощью этого объекта.

Чтобы было проще понять, как происходит работа с классами в Mootools, проведем аналогию с классами объектами в серверных языках программирования, например, Java.

1. Создание простого класса

Создадим простой класс Button, у которого есть только одно поле name и один метод showName.
Java:
class Button {
//объявление свойства
String name;
//конструктор
Button(String name) {
//инициализация поля объекта
this.name = name;
}
//метод
void showName(){
System.out.println("Button name: " + name);
}}

Mootools:
//создание нового класса
var Button = new Class({
//конструктор
initialize: function(name){
//объявление и инициализация свойства.
this.name = name;
},
//метод
showName:function(){
alert(this.name);
}
});

Теперь рассмотрим, как в обоих случаях создаются экземпляры этих классов.
Java:
Button button = new Button('Press me');
button.showName();

Mootools:
var button = new Button('Press me');
button.showName();

Рассмотрим, в чем тут особенности Mootools. Во-первых, имя класса — это фактически имя переменной, которой мы присваиваем новый объект Class. Конструктор класса — это специальный метод initialize, название которого не совпадает с именем класса и ни один метод класса в Mootools не должен совпадать с названием метода-конструктора. Поля класса создаются тогда, когда они инициализируются.

Часть 2. Контекст исполнения

В JavaScript существует понятие «Контекст исполнения». Это всего лишь значение переменной this внутри функции. Часто одна и та же функция вызывается для разных объектов, при этом значение переменной this у нее будет разное. Рассмотрим, как происходит изменение контекста исполнения, на следующем примере:

function showName(){
if (this.myName==undefined)
alert('undefined'); //если у объекта нет такого свойства, то сообщаем об этом
else
alert(this.myName);//показать свойство объекта
}
showName(); //то же самое, что и this.showName()

Сначала мы определили функцию showName(), которая просто показывает свойство объекта myName. Когда мы первый раз вызываем showName(), то this ссылается на window (это для Firefox, у других браузеров он может быть другой), у которого свойство myName еще не определено, поэтому появится сообщение 'undefined'. Второй раз мы вызываем функцию у объекта myParam, поэтому в самой функции showName() переменная this уже ссылается на myParam. В результате, в браузере появится сообщение 'myParam name'. Наконец, третий раз функция showName() снова вызывается для объекта window, и, следовательно, контекст исполнения так же меняется (this ссылается на window). Но теперь свойство myName определено для данного объекта, и появится сообщение 'myName name'.

У любой функции в JavaScript можно вызвать метод call() для передачи контекста исполнения. Этот метод позволяет вызвать метод одного объекта в контексте другого объекта.
Синтаксис: functionName.call(object[,args]?)
Аргументы: object — любой объект
arg — список аргументов функции через запятую
Вызов метод call, мы выполняем функцию functionName, задавая в качестве this указатель на object, а в качестве аргументов функции — args.
Например,

var myCallParam = {'myName':'myCallParam name'}
showName.call(myCallParam);
myParam.showName.call(myCallParam);

Здесь мы создаем новый объект myCallParam. Далее мы вызываем (с использованием метода call) функцию showName, передавая ей в качестве this объект myCallParam. Поэтому на экране появится сообщение 'myCallParam name'.

Готовый пример (контекст исполнения)

Постоянный адрес статьи: www.lar.ru/articles/development/javascript

Метки: JavaScript

Запись опубликована 01.12.2008 в 13:16 и размещена в рубрике Делимся опытом, Статьи. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Можно оставить комментарий или сделать обратную ссылку с вашего сайта.