Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ООП в JavaScript
Создание: Из пустого объекта { } 
var person = { }; 
person.name = ‘Dino’; 
person.getName = function () { 
return person....
Создание: Сразу {…} 
var person = { 
name: ‘Dino’, 
getName: function () { 
return this.name; 
} 
}; 
123456 
ЗЗААППЯЯТТАА...
Манипуляции 
• CRUD свойств 
• Вложенные объекты 
• Передача по ссылке всегда 
myObject.myProperty == myObject[‘myProperty...
Object.prototype 
• Добавление свойств во все экземпляры: 
myPerson.prototype.provider = ‘WebStream’ 
•Расширение встроенн...
Конструктор: Запись 
var Person = function (name) { 
this.name = name; 
this.say = function () { 
return "I am " + this.na...
Конструктор: Неявные действия 
var Person = function (name) { 
var this = Object.create(Person.prototype); 
this.name = na...
Отсутствие ‘new’ не ошибка 
= 
this.member == window.member 
• constructor - UpperCamelCase 
• methods - lowerCamelCase
Конструктор: проверка this 
function Person(name) { 
if (!(this instanceof Person)) { 
return new Person(name); 
} 
this.n...
Приватные свойства: В конструкторе 
Решение – замыкание (closure) 
function Person() { 
var gender = ‘Female’; 
this.getGe...
Приватные свойства: Без конструктора 
Anonymous Immediate Function (Анонимное замыкание) 
var myPerson = (function () { 
v...
Статические свойства: Публичные 
var Person = function () { }; 
Person.getSpecies = function () { 
return ‘Homo sapiens’; ...
Статические & объектные методы 
var Person = function (name) { 
this.name = name; 
}; 
Person.getSpecies = function () { 
...
Статические свойства: Приватные 
• разделены между объектами, которые созданы одним конструктором 
• не доступны вне конст...
Константы 
• ALL_CAPS 
ИХ НЕТ 
• Объект Constant с методами: 
–set(name, value) 
– isDefined(name) 
–get(name)
Цепочки объектов (chaining) 
myObj.method1(‘hello’).method2().method3(‘world’); 
return this; 
изящно 
специализировано tr...
Правда о наследовании 
• Нет классов как класса 
• "Функция-конструктор" - более аккуратная замена 
термина "класс" 
• "Эк...
Наследование классами: Функция inherit(C, P) 
КОНСТРУКТОР 
PARENT 
КОНСТРУКТОР 
CHILD 
inherit (child, parent); 
НАСЛЕДНИК
Наследование классами: Обычный способ 
function Parent(name) { 
this.name = name || 'Adam'; 
} 
Parent.prototype.say = fun...
Наследование классами: Святой Грааль 
var inherit = (function () { 
var F = function () { }; 
return function (C, P) { 
F....
Наследование классами: Картинка 
new Parent() 
name = Adam 
prototype: 
say() 
new F() 
prototype 
new Child() prototype 
...
Наследование классами лучше избегать 
• Технически классов в JavaScript не существует 
• Путаница в терминологии и реализа...
Наследование прототипами 
if (typeof Object.beget !== 'function') { 
Object.beget = function (o) { 
var F = function () { ...
Наследование копированием свойств 
1. shallow copy 
2. deep copy 
function extend(parent, child) { 
var i; 
child = child ...
Одалживание (borrowing) методов 
методы объекта «Функция» CALL и APPLY 
objFOO.myMethod.call(objBAR, param1, p2, p3); 
obj...
Спасибо за внимание, вопросы 
1. Создание: Из пустого объекта { } 
2. Создание: Сразу {…} 
3. Манипуляции 
4. Конструктор:...
Upcoming SlideShare
Loading in …5
×

ООП в JavaScript

629 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

ООП в JavaScript

  1. 1. ООП в JavaScript
  2. 2. Создание: Из пустого объекта { } var person = { }; person.name = ‘Dino’; person.getName = function () { return person.name; }; 1 2 3 4 5
  3. 3. Создание: Сразу {…} var person = { name: ‘Dino’, getName: function () { return this.name; } }; 123456 ЗЗААППЯЯТТААЯЯ
  4. 4. Манипуляции • CRUD свойств • Вложенные объекты • Передача по ссылке всегда myObject.myProperty == myObject[‘myProperty’] myObject.FOO myObject.FOO.BAR myObject.FOO && myObject.FOO.BAR undefined TypeError undefined for (myProperty in myObject) {…}
  5. 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. 6. Конструктор: Запись var Person = function (name) { this.name = name; this.say = function () { return "I am " + this.name; }; }; 123456
  7. 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. 8. Отсутствие ‘new’ не ошибка = this.member == window.member • constructor - UpperCamelCase • methods - lowerCamelCase
  9. 9. Конструктор: проверка this function Person(name) { if (!(this instanceof Person)) { return new Person(name); } this.name = name; } 123456
  10. 10. Приватные свойства: В конструкторе Решение – замыкание (closure) function Person() { var gender = ‘Female’; this.getGender = function () { return gender; }; } • Возвращенный объект можно изменить: – возвращать только то, что надо – возвращать копию объекта 1 2345 6
  11. 11. Приватные свойства: Без конструктора Anonymous Immediate Function (Анонимное замыкание) var myPerson = (function () { var gender = ‘Female’; return { getGender: function () { return gender; } }; }()); 1 2345 678
  12. 12. Статические свойства: Публичные var Person = function () { }; Person.getSpecies = function () { return ‘Homo sapiens’; }; 1 2 3 4 • Статический метод не запустится на объекте • Объектный метод не запустится как статический
  13. 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. 14. Статические свойства: Приватные • разделены между объектами, которые созданы одним конструктором • не доступны вне конструктора var Person = (function () { var counter = 0, NewPerson; NewPerson = function () { counter += 1; }; NewPerson.prototype.getCount = function () { return counter; }; return NewPerson; }()); 123456789 10
  15. 15. Константы • ALL_CAPS ИХ НЕТ • Объект Constant с методами: –set(name, value) – isDefined(name) –get(name)
  16. 16. Цепочки объектов (chaining) myObj.method1(‘hello’).method2().method3(‘world’); return this; изящно специализировано train wreck
  17. 17. Правда о наследовании • Нет классов как класса • "Функция-конструктор" - более аккуратная замена термина "класс" • "Экземпляр класса" не имеет того смысла • Но есть слово «new» • Object.prototype • Объекты создаются на основе других объектов • Объекты - это просто пары «ключ»-«значение» • “Prefer object composition to class inheritance.” GoF
  18. 18. Наследование классами: Функция inherit(C, P) КОНСТРУКТОР PARENT КОНСТРУКТОР CHILD inherit (child, parent); НАСЛЕДНИК
  19. 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. 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. 21. Наследование классами: Картинка new Parent() name = Adam prototype: say() new F() prototype new Child() prototype constructor = Child uber
  22. 22. Наследование классами лучше избегать • Технически классов в JavaScript не существует • Путаница в терминологии и реализации • Подобный подход можно использовать, если разработчик не умеет работать с прототипами, а умеет с классами • Повторно использовать код можно и без "классического" наследования
  23. 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. 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. 25. Одалживание (borrowing) методов методы объекта «Функция» CALL и APPLY objFOO.myMethod.call(objBAR, param1, p2, p3); objFOO.myMethod.apply(objBAR, [param1, p2, p3]); • В методе objFOO.myMethod() вместо this подставляется objBAR • Нужны только те свойства, которые используются в методе • Не надо строить иерархию наследования ради нескольких методов
  26. 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) методов

×