Опубликован: 19.10.2006 | Уровень: для всех | Доступ: платный
Лекция 8:

Основы объектно-ориентированного программирования

< Лекция 7 || Лекция 8: 123 || Лекция 9 >
Аннотация: Основы объектно-ориентированного программирования (ООП) в JavaScript. new Object и объектные литералы. Прототипирование. Переменные Private, Public и Static.

Основы JavaScript

Почти каждый современный язык программирования имеет некоторый метод записи объектно-ориентированного (ОО) кода. Если вы знакомы с такими языками, как C++, Java, VB, php или подобными, то должны быть знакомы и со структурой Class этих языков.

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

Структура Class и объекты в целом хорошо работают потому, что они действуют как реальные объекты. Например, мы можем иметь класс Телевизор. Так как все телевизоры в целом работают одинаково, то нет необходимости переопределять множество атрибутов телевизора, чтобы сделать еще один новый. Этот класс будет определять методы и свойства телевизора. Мы будем иметь такие свойства, как марка, размер экрана, и т.д., и методы, такие, как включить/выключить, сменить канал, и т.д.

JavaScript слегка отличается от стандартной объектно-ориентированной структуры Class. Вместо использования классов для создания объектов, каждая функция в JavaScript может эффективно действовать как класс. Мы используем концепцию вложенных функций, называемую прототипированием ( Prototyping ), для выполнения таких же вещей, как и языки со структурами Class. Если вы знакомы с ОО-языком на основе классов, то прототипирование может показаться сначала непривычной концепцией, но она предлагает большие возможности и часто является значительно более гибкой с точки зрения программирования, чем другие методы.

new Object и объектные литералы

Для начала необходимо объяснить, как объекты действуют в JavaScript. Объекты позволяют определить переменную и задать затем для этой переменной любое число свойств. Чтобы понять это, давайте посмотрим на простой пример:

var myObj  = new Object;
myObj.a    = 5;
myObj['b'] = 10;
myObj.c    = 20;
myObj.getTotal = function(){
  alert(this.a+this.b+this.c);
};

// или 

var myObj = {a:5, b:10, c:20, 
 getTotal:function() { alert(this.a+this.b+this.c); }};

Оба эти фрагмента кода создают одну и ту же переменную myObj. Первый пример использует синтаксис new Object(), а затем определяет все свойства одно за другим. Второй фрагмент кода является сокращенной нотацией, которая делает в точности то же самое. Мы имеем теперь переменную myObj. myObj содержит три переменные для целых чисел: a, b и c. Для доступа к любой из них мы просто используем myObj.a или myObj['a']. Можно видеть, что myObj имеет также в качестве свойства функцию getTotal. Мы обращаемся к getTotal таким же образом, как и к свойствам a, b и c: myObj.getTotal(). Функция getTotal() обращается к переменным в переменной myObj с помощью this. При выполнении кода внутри функции в объекте this ссылается на объект. В данном случае this ссылается на сам объект myObj.

Как можно видеть, объекты в JavaScript являются чрезвычайно полезными. К сожалению, часто приходится объявлять слишком много информации каждый раз, когда мы хотим создать объект. Например, давайте создадим объект Animal:

var myAnimal = {
  name:     'felix',
  species:  'cat',
  talk:     function(){ alert('Meow!'); },
  callOver: function(){ alert(this.name+' ignores you'); },
  pet:      function(){ alert('Purr!'); }
}

Мы имеем переменную myAnimal, которая представляет кота ( cat ) с именем Феликс ( felix ). Однако, если потребуется создать другого кота, нам понадобиться ввести все это снова. Здесь на помощь приходит объектно-ориентированный подход. Вместо перепечатки всякий раз всего объекта можно определить функцию, которая создает для нас аналогичный объект:

function Cat(name){
  this.name     = name;

  this.species  = 'Cat';
  this.talk     = function(){ alert('Meow!'); }
  this.callOver = function(){ alert(this.name+' ignores you'); },
  this.pet      = function(){ alert('Purr!'); }
}

var felix = new Cat('Felix');
var sam   = new Cat('Sam');
var patty = new Cat('Patty');

felix.pet();          // выводит 'Purr!'
sam.callOver();       // выводит 'Sam ignores you'.  Просто, как кот!
alert(patty.species); // выводит 'Cat'

В этом примере создана одна функция Cat, а затем создаются три новых кота с помощью этой функции: Felix, Sam и Patty. Каждый из этих котов имеет одинаковые функции: talk, callOver и pet, и каждая из них имеет свойство species, заданное как 'cat'. И подобно всем котам, они в равной степени своенравны.

Обычно говорят, что felix, sam и patty являются экземплярами одного объекта: Cat. Код самой функции Cat называется конструктором. Мы передаем ей переменную name и используем ее для задания this.name. К сожалению, при объявлении каждой функции Cat в конструкторе в действительности создается новая копия каждой функции всякий раз при создании нового Cat. Так как функции talk, callOver и pet являются идентичными, то нам в действительности требуется только одна копия каждой функции. Здесь на помощь приходит прототипирование.

< Лекция 7 || Лекция 8: 123 || Лекция 9 >
Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Рустам Рахимов
Рустам Рахимов

Пол часа искал в интеренете, как что работает. Такое чувство что автор пишет для людей которые уже знают js, или просто хвастается своими знаниями. Конструкция формы непонятна. И можно было бы в кратце написать, что такое событие которое используют. Сорершенно не понятно как работает форма, и как брать из нее значение. 

function Complete() {

    var x = "Имя: " + document.tutform.firstname.value;

alert(x);

} - Так брать значение из формы tutform, firstname-получаем значение из имени. 

<INPUT TYPE="button" VALUE="Готово" onClick="Complete();"> - Нужно к кнопке прописать событие, при нажатие на кнопку готово, чтобы возвращалось значение с помощью функции. А так ничего не работает, и смысла учить нету, если не знать почему не работает.

 

Анатолий Федоров
Анатолий Федоров
Россия, Москва, Московский государственный университет им. М. В. Ломоносова, 1989
Олег Волков
Олег Волков
Россия, Балаково, МБОУ СОШ 19