В презентации затрагиваются следующие темы: Три столпа ООП Что отсутсвует в js "this" и как это можно изменить "prototype" или / и "__proto__" что делает "new" как убить конструктор разные способы создания объектов наследование

1. Горник Виталий, PMP®
Ph.D. in IT (Computer Science)
Всё ли ты знаешь о JavaScript ООП?

2. Управляющий код процедурного программирования
постоянно обрабатывает различные ситуации.
Управляющий код ООП старается передать ответственность
исполнителю - объектам системы.
Процедурное vs ООП

3. 0
5
10
15
20
25
30
Month1
Month3
Month5
Month7
Month9
Month11
Month13
Month15
Month17
Month19
Month21
Month23
Month25
Проц.
ООП
Ваши усилия и нервы на проекте
удовлетворённость работой обратно пропорциональна

4. …и радость от нового таска на проекте станет
такой

5. Три столпа ООП
1. Инкапсуляция через замыкания
2. Наследование через прототипирование
3. Полиморфизм а js не типизированный язык 

6. 1. интерфейсов и абстрактных классов*
2. финальных классов
3. protected
4. статических членов классов
в JS нет

7. this
var obj = { outerWidth : 20 };
function getWidth() { return this.outerWidth; }
var a = getWidth ();
var b = getWidth.apply(obj);
this указывает на объект в контексте которого работает код

8. Изменение this?
1. var obj = new SomeFunction(…); // создаваемый объект
2. obj.publicFunction(….); // obj
3. someFunction.apply(obj,[arg1,arg2,….]); // obj
4. someFunction.call(obj, arg1,arg2,….); // obj

10. prototype или / и __proto__
function A() {….}
A.prototype – объект с одним свойством «constructor».
A.prototype.constructor – функция А
A.__proto__ – Function.prototype, потомoк Object.
Object есть парент всего.
alert(A.__proto__ === A.prototype.constructor.__proto__ ); // true

11. A
Function
Object
prototype
__proto__
prototype
__proto__
prototype
prototype – определяет свойства создаваемых объектов
__proto__ – есть у всех и служит для связи parent/child

12. function A(args) {….}
var obj = new A(args);
1. var obj = {};
2. obj.__proto__ = A.prototype;
3. var newConstructor = A.apply(obj, [args]);
4. obj = newConstructor instanceof Object ? newConstructor : obj;
alert(obj.prototype); // undefined
alert(obj.__proto__ === A.prototype); // true
alert(obj.__proto__.__proto__ === Object.prototype); // true
new

13. var obj = new A();
A.__proto__.p1 = 1; // добавили свойство в конструктор
alert (obj.p1); // “undefined”
alert (obj.constructor. p1); // “1”
obj.__proto__.p2 = 2;
alert(obj.p2); // “2”
A.prototype.p3 = 3;
alert(obj.p3); // “3”
Ещё два слова о prototype и __proto__

14. …бросаемся с настроением в код…

15. Простой объект, singleton
var obj =
{
v : "prop"
, AA1 : function(t)
{
alert(this.v + t);
}
}; // "obj" – это "new Object()" с "v" и "AA1" ключами
obj.AA2 = function(…){…..}; // добавили AA2 ключ к A
obj.AA1(1);
obj.AA2();

16. Простой класс
function A() { this.v = 'prop'; return this; }
A.prototype.AA1 = function(){…};
var obj = new A();
// “v” свойство объекта obj
// АА1 свойство прототипа объекта
A.prototype.AA2 = function(t) { alert(this.v+t); };
obj.AA2(2); // a1.__proto__ === A.prototype
поэтому работает
var obj2 = A(); // obj2 это window
obj2.AA1(1); // у которого нет AA1

17. function A() { return this; }
A.prototype = {
v : 'prop + '
, AA1 : function(){….}
};
// "A.prototype" превратилось в "new Object()"
// А.prototype.constructor не A
var obj = new A();
A.prototype.AA2 = function(){….};
obj.AA1();
Убей конструктор

18. private члены
function A()
{
var p1 = 1; // зона видимости “A”
function privateFunction() { p1=2; }
this.v = 'prop';
this.publicFunction = function()
{
privateFunction();
alert(this.v+p1);
}
}
A.prototype.AA1 = function(t){alert(this.v+t)};
var obj = new A();
obj.v = 'new value ';
obj.AA1(3);
obj.publicFunction();

19. var A = function()
{
var p1 = 1;
function privateFunction() { p1 = 2; }
function B() { return 1; }
B.prototype.v = 'prop ';
B.prototype.publicFunction = function()
{
privateFunction();
}
return B;
}
var obj = new ( A() )();
Сложный класс

20. var A = (function()
{
var p1 = 1;
function B() {}
B.prototype.setP1 = function(t){p1 = t; }
B.prototype.publicFunction = function() { alert(p1); }
return B;
})();
var obj1 = new A();
obj1.setP1(3);
var obj2 = new A();
obj2.publicFunction(); // alert "3"
Сложный singleton

21. function extend(Child, Parent) {….} // thx Crockford
function A() { ….. }
A.prototype.v = 'prop ';
A.prototype.AA1 = function(t){ alert(this.v+t); };
function B()
{
this.z = 2;
B.superclass.constructor.apply(this, arguments);
}
extend(B, A);
var obj = new B();
obj.AA1();
Наследование

22. Контактная информация
• Технический и проект менеджер
• Горник Виталий, PMP®, Ph.D. in IT (Computer Science)
• vhornik@gmail.com