ООП в JavaScript

Создание: Из пустого объекта { }

var person = { };

person.name = ‘Dino’;

person.getName = function () {

return person.name;

};

1

2

3

4

5

Создание: Сразу {…}

var person = { name: ‘Dino’, getName: function () { return this.name; }};

123456

ЗАПЯТАЯЗАПЯТАЯ

Манипуляции• CRUD свойств• Вложенные объекты• Передача по ссылке всегда

myObject.myProperty == myObject[‘myProperty’]

for (myProperty in myObject) {…}

myObject.FOO

myObject.FOO.BAR

myObject.FOO && myObject.FOO.BAR

undefined

undefined

TypeError

Object.prototype

• Добавление свойств во все экземпляры:

Array.prototype.forEach Array.prototype.filterArray.prototype.splice

• При удалении свойства у объекта будет “просвечивать” то же свойство его прототипа

• Расширение встроенных объектов Array, String:

myPerson.prototype.provider = ‘WebStream’

String.prototype.htmlEncodeString.prototype.trimString.prototype.replace

Конструктор: Запись

var Person = function (name) {

this.name = name; this.say = function () { return "I am " + this.name;

};};

123456

Конструктор: Неявные действия

Конструктор может возвращать любой объект

var Person = function (name) { var this = Object.create(Person.prototype); this.name = name; this.say = function () { return ‘I am ‘ + this.name; }; return this;};

1

2345

6

a

b

Отсутствие ‘new’ не ошибка

• constructor - UpperCamelCase• methods - lowerCamelCase

this.member == window.member

=

Конструктор: проверка this

function Person(name) { if (!(this instanceof Person)) { return new Person(name); } this.name = name;}

123456

Приватные свойства: В конструкторе

• Возвращенный объект можно изменить:– возвращать только то, что надо– возвращать копию объекта

Решение – замыкание (closure)

function Person() { var gender = ‘Female’; this.getGender = function () { return gender; };}

123456

Приватные свойства: Без конструктораAnonymous Immediate Function (Анонимное замыкание)

var myPerson = (function () { var gender = ‘Female’; return { getGender: function () { return gender; } };}());

12345678

Статические свойства: Публичные

• Статический метод не запустится на объекте

• Объектный метод не запустится как статический

var Person = function () { };Person.getSpecies = function () { return ‘Homo sapiens’;};

1

2

3

4

Статические & объектные методыvar Person = function (name) { this.name = name;};

Person.getSpecies = function () { var msg = ‘Homo sapiens’; if (this instanceof Person) { msg += ‘, named ‘ + this.name; } return msg;};

Person.prototype.getSpecies = function () { return Person.getSpecies.call(this);};

123

456789

10

111213

Статические свойства: Приватные• разделены между объектами, которые созданы одним конструктором

• не доступны вне конструктора

var Person = (function () { var counter = 0, NewPerson; NewPerson = function () { counter += 1; }; NewPerson.prototype.getCount = function () { return counter; }; return NewPerson;}());

123456789

10

Константы

•ALL_CAPS

• Объект Constant с методами:

–set(name, value)

– isDefined(name)

–get(name)

ИХ НЕТИХ НЕТ

Цепочки объектов (chaining)

myObj.method1(‘hello’).method2().method3(‘world’);

return this;

изящноспециализировано train wreck

Правда о наследовании• Нет классов как класса

• "Функция-конструктор" - более аккуратная замена термина "класс"

• "Экземпляр класса" не имеет того смысла

• Но есть слово «new»

• Object.prototype

• Объекты создаются на основе других объектов

• Объекты - это просто пары «ключ»-«значение»

• “Prefer object composition to class inheritance.” GoF

Наследование классами: Функция inherit(C, P)

КОНСТРУКТОР

PARENTКОНСТРУКТОР

CHILD

НАСЛЕДНИК

inherit (child, parent);

Наследование классами: Обычный способ

function Parent(name) { this.name = name || 'Adam';}Parent.prototype.say = function () { return this.name;};function Child(name) { };

inherit(Child, Parent);

function inherit(C, P) { C.prototype = new P();}

234567

8

910

1

11

• Нет передачи параметров

• Потомку передается весь Родитель,а не его prototype

Наследование классами: Святой Грааль

var inherit = (function () { var F = function () { }; return function (C, P) { F.prototype = P.prototype; C.prototype = new F(); C.uber = P.prototype; C.prototype.constructor = C; }}());

23456789

1

Наследование классами: Картинка

name = Adam

prototype:say()

new Parent()

new F()

prototype

new Child() prototypeconstructor = Child

uber

Наследование классами лучше избегать

• Технически классов в JavaScript не существует

• Путаница в терминологии и реализации

• Подобный подход можно использовать, если разработчик не умеет работать с прототипами, а умеет с классами

• Повторно использовать код можно и без "классического" наследования

Наследование прототипами

Объекты наследуются от объектов

if (typeof Object.beget !== 'function') { Object.beget = function (o) { var F = function () { }; F.prototype = o; return new F(); };}

var anotherPerson = Object.beget(person);

234567

8

1

Наследование копированием свойств

1. shallow copy

2. deep copy

function extend(parent, child) { var i; child = child || { }; for (i in parent) { if (parent.hasOwnProperty(i)) { child[i] = parent[i]; } } return child;}

Prototype не участвуют.Только СОБСТВЕННЫЕ свойства объектов

Одалживание (borrowing) методов

• В методе objFOO.myMethod() вместо this подставляется objBAR

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

• Не надо строить иерархию наследования ради нескольких методов

objFOO.myMethod.call(objBAR, param1, p2, p3);

objFOO.myMethod.apply(objBAR, [param1, p2, p3]);

методы объекта «Функция» CALL и APPLY

Спасибо за внимание, вопросы1. Создание: Из пустого объекта { }2. Создание: Сразу {…}3. Манипуляции4. Конструктор: Запись5. Конструктор: Неявные действия6. Отсутствие “new” не ошибка7. Конструктор: проверка this 8. Приватные свойства: В конструкторе9. Приватные свойства: Без конструктора10. Статические свойства: Публичные11. Статические & объектные методы12. Статические свойства: Приватные13. Константы14. Цепочки объектов15. Правда о наследовании16. Наследование классами: Функция inherit(C, P)17. Наследование классами: Обычный способ18. Наследование классами: Святой Грааль19. Наследование классами: Картинка20. Наследование классами лучше избегать21. Наследование прототипами22. Наследование копированием свойств23. Одалживание (borrowing) методов