Презентация "Объектно ориентированое программирование в JavaScript"

1. ООП в JavaScript

2. Создание: Из пустого объекта { }
var person = { };
person.name = ‘Dino’;
person.getName = function () {
return person.name;
};
1
2
3
4
5

3. Создание: Сразу {…}
var person = {
name: ‘Dino’,
getName: function () {
return this.name;
}
};
123456
ЗЗААППЯЯТТААЯЯ

4. Манипуляции
• CRUD свойств
• Вложенные объекты
• Передача по ссылке всегда
myObject.myProperty == myObject[‘myProperty’]
myObject.FOO
myObject.FOO.BAR
myObject.FOO && myObject.FOO.BAR
undefined
TypeError
undefined
for (myProperty in myObject) {…}

5. Object.prototype
• Добавление свойств во все экземпляры:
myPerson.prototype.provider = ‘WebStream’
•Расширение встроенных объектов Array, String:
Array.prototype.forEach
Array.prototype.filter
Array.prototype.splice
String.prototype.htmlEncode
String.prototype.trim
String.prototype.replace
•При удалении свойства у объекта будет
“просвечивать” то же свойство его прототипа

6. Конструктор: Запись
var Person = function (name) {
this.name = name;
this.say = function () {
return "I am " + this.name;
};
};
123456

7. Конструктор: Неявные действия
var Person = function (name) {
var this = Object.create(Person.prototype);
this.name = name;
this.say = function () {
return ‘I am ‘ + this.name;
};
return this;
};
Конструктор может возвращать любой объект
1
a
2345
b
6

8. Отсутствие ‘new’ не ошибка
=
this.member == window.member
• constructor - UpperCamelCase
• methods - lowerCamelCase

9. Конструктор: проверка this
function Person(name) {
if (!(this instanceof Person)) {
return new Person(name);
}
this.name = name;
}
123456

10. Приватные свойства: В конструкторе
Решение – замыкание (closure)
function Person() {
var gender = ‘Female’;
this.getGender = function () {
return gender;
};
}
• Возвращенный объект можно изменить:
– возвращать только то, что надо
– возвращать копию объекта
1
2345
6

11. Приватные свойства: Без конструктора
Anonymous Immediate Function (Анонимное замыкание)
var myPerson = (function () {
var gender = ‘Female’;
return {
getGender: function () {
return gender;
}
};
}());
1
2345
678

12. Статические свойства: Публичные
var Person = function () { };
Person.getSpecies = function () {
return ‘Homo sapiens’;
};
1
2
3
4
• Статический метод не запустится на объекте
• Объектный метод не запустится как статический

13. Статические & объектные методы
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
11
12
13

14. Статические свойства: Приватные
• разделены между объектами, которые созданы одним конструктором
• не доступны вне конструктора
var Person = (function () {
var counter = 0, NewPerson;
NewPerson = function () {
counter += 1;
};
NewPerson.prototype.getCount = function () {
return counter;
};
return NewPerson;
}());
123456789 10

15. Константы
• ALL_CAPS
ИХ НЕТ
• Объект Constant с методами:
–set(name, value)
– isDefined(name)
–get(name)

16. Цепочки объектов (chaining)
myObj.method1(‘hello’).method2().method3(‘world’);
return this;
изящно
специализировано train wreck

17. Правда о наследовании
• Нет классов как класса
• "Функция-конструктор" - более аккуратная замена
термина "класс"
• "Экземпляр класса" не имеет того смысла
• Но есть слово «new»
• Object.prototype
• Объекты создаются на основе других объектов
• Объекты - это просто пары «ключ»-«значение»
• “Prefer object composition to class inheritance.” GoF

18. Наследование классами: Функция inherit(C, P)
КОНСТРУКТОР
PARENT
КОНСТРУКТОР
CHILD
inherit (child, parent);
НАСЛЕДНИК

19. Наследование классами: Обычный способ
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();
}
1
234567
8
9
10
11
• Нет
передачи
параметров
• Потомку
передается
весь
Родитель,
а не его
prototype

20. Наследование классами: Святой Грааль
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;
}
}());
1
23456789

21. Наследование классами: Картинка
new Parent()
name = Adam
prototype:
say()
new F()
prototype
new Child() prototype
constructor = Child
uber

22. Наследование классами лучше избегать
• Технически классов в JavaScript не существует
• Путаница в терминологии и реализации
• Подобный подход можно использовать, если
разработчик не умеет работать с прототипами, а
умеет с классами
• Повторно использовать код можно и без
"классического" наследования

23. Наследование прототипами
if (typeof Object.beget !== 'function') {
Object.beget = function (o) {
var F = function () { };
F.prototype = o;
return new F();
};
}
var anotherPerson = Object.beget(person);
Объекты наследуются от объектов
1
234567
8

24. Наследование копированием свойств
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 не участвуют.
Только СОБСТВЕННЫЕ свойства объектов

25. Одалживание (borrowing) методов
методы объекта «Функция» CALL и APPLY
objFOO.myMethod.call(objBAR, param1, p2, p3);
objFOO.myMethod.apply(objBAR, [param1, p2, p3]);
• В методе objFOO.myMethod() вместо this
подставляется objBAR
• Нужны только те свойства, которые используются в
методе
• Не надо строить иерархию наследования ради
нескольких методов

26. Спасибо за внимание, вопросы
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) методов