Download - Всё ли ты знаешь о JavaScript ООП?
![Page 1: Всё ли ты знаешь о JavaScript ООП?](https://reader035.vdocuments.mx/reader035/viewer/2022062313/557f2023d8b42a00268b46e7/html5/thumbnails/1.jpg)
Горник Виталий, PMP® Ph.D. in IT (Computer Science)
Всё ли ты знаешь о JavaScript ООП?
![Page 2: Всё ли ты знаешь о JavaScript ООП?](https://reader035.vdocuments.mx/reader035/viewer/2022062313/557f2023d8b42a00268b46e7/html5/thumbnails/2.jpg)
Управляющий код процедурного программирования постоянно обрабатывает различные ситуации.
Управляющий код ООП старается передать ответственность исполнителю - объектам системы.
Процедурное vs ООП
![Page 3: Всё ли ты знаешь о JavaScript ООП?](https://reader035.vdocuments.mx/reader035/viewer/2022062313/557f2023d8b42a00268b46e7/html5/thumbnails/3.jpg)
Month
1
Month
4
Month
7
Month
10
Month
13
Month
16
Month
19
Month
22
Month
250
5
10
15
20
25
30
Проц.ООП
Ваши усилия и нервы на проекте
удовлетворённость работой обратно пропорциональна
![Page 4: Всё ли ты знаешь о JavaScript ООП?](https://reader035.vdocuments.mx/reader035/viewer/2022062313/557f2023d8b42a00268b46e7/html5/thumbnails/4.jpg)
…и радость от нового таска на проекте станет такой
![Page 5: Всё ли ты знаешь о JavaScript ООП?](https://reader035.vdocuments.mx/reader035/viewer/2022062313/557f2023d8b42a00268b46e7/html5/thumbnails/5.jpg)
Три столпа ООП
1. Инкапсуляция через замыкания
2. Наследование через прототипирование
3. Полиморфизм а js не типизированный язык
![Page 6: Всё ли ты знаешь о JavaScript ООП?](https://reader035.vdocuments.mx/reader035/viewer/2022062313/557f2023d8b42a00268b46e7/html5/thumbnails/6.jpg)
1. интерфейсов и абстрактных классов*
2. финальных классов
3. protected
4. статических членов классов
в JS нет
![Page 7: Всё ли ты знаешь о JavaScript ООП?](https://reader035.vdocuments.mx/reader035/viewer/2022062313/557f2023d8b42a00268b46e7/html5/thumbnails/7.jpg)
this
var obj = { outerWidth : 20 };function getWidth() { return this.outerWidth; }
var a = getWidth ();var b = getWidth.apply(obj);
this указывает на объект в контексте которого работает код
![Page 8: Всё ли ты знаешь о JavaScript ООП?](https://reader035.vdocuments.mx/reader035/viewer/2022062313/557f2023d8b42a00268b46e7/html5/thumbnails/8.jpg)
Изменение this?
1. var obj = new SomeFunction(…); // создаваемый объект
2. obj.publicFunction(….); // obj
3. someFunction.apply(obj,[arg1,arg2,….]); // obj
4. someFunction.call(obj, arg1,arg2,….); // obj
![Page 9: Всё ли ты знаешь о JavaScript ООП?](https://reader035.vdocuments.mx/reader035/viewer/2022062313/557f2023d8b42a00268b46e7/html5/thumbnails/9.jpg)
Вперёд!!!
![Page 10: Всё ли ты знаешь о JavaScript ООП?](https://reader035.vdocuments.mx/reader035/viewer/2022062313/557f2023d8b42a00268b46e7/html5/thumbnails/10.jpg)
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
![Page 11: Всё ли ты знаешь о JavaScript ООП?](https://reader035.vdocuments.mx/reader035/viewer/2022062313/557f2023d8b42a00268b46e7/html5/thumbnails/11.jpg)
A
Function
Object
prototype
__proto__
prototype
__proto__
prototype
prototype – определяет свойства создаваемых объектов__proto__ – есть у всех и служит для связи parent/child
![Page 12: Всё ли ты знаешь о JavaScript ООП?](https://reader035.vdocuments.mx/reader035/viewer/2022062313/557f2023d8b42a00268b46e7/html5/thumbnails/12.jpg)
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); // undefinedalert(obj.__proto__ === A.prototype); // truealert(obj.__proto__.__proto__ === Object.prototype); // true
new
![Page 13: Всё ли ты знаешь о JavaScript ООП?](https://reader035.vdocuments.mx/reader035/viewer/2022062313/557f2023d8b42a00268b46e7/html5/thumbnails/13.jpg)
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__
![Page 14: Всё ли ты знаешь о JavaScript ООП?](https://reader035.vdocuments.mx/reader035/viewer/2022062313/557f2023d8b42a00268b46e7/html5/thumbnails/14.jpg)
…бросаемся с настроением в код…
![Page 15: Всё ли ты знаешь о JavaScript ООП?](https://reader035.vdocuments.mx/reader035/viewer/2022062313/557f2023d8b42a00268b46e7/html5/thumbnails/15.jpg)
Простой объект, 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();
![Page 16: Всё ли ты знаешь о JavaScript ООП?](https://reader035.vdocuments.mx/reader035/viewer/2022062313/557f2023d8b42a00268b46e7/html5/thumbnails/16.jpg)
Простой класс
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 это windowobj2.AA1(1); // у которого нет AA1
![Page 17: Всё ли ты знаешь о JavaScript ООП?](https://reader035.vdocuments.mx/reader035/viewer/2022062313/557f2023d8b42a00268b46e7/html5/thumbnails/17.jpg)
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();
Убей конструктор
![Page 18: Всё ли ты знаешь о JavaScript ООП?](https://reader035.vdocuments.mx/reader035/viewer/2022062313/557f2023d8b42a00268b46e7/html5/thumbnails/18.jpg)
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();
![Page 19: Всё ли ты знаешь о JavaScript ООП?](https://reader035.vdocuments.mx/reader035/viewer/2022062313/557f2023d8b42a00268b46e7/html5/thumbnails/19.jpg)
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() )();
Сложный класс
![Page 20: Всё ли ты знаешь о JavaScript ООП?](https://reader035.vdocuments.mx/reader035/viewer/2022062313/557f2023d8b42a00268b46e7/html5/thumbnails/20.jpg)
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
![Page 21: Всё ли ты знаешь о JavaScript ООП?](https://reader035.vdocuments.mx/reader035/viewer/2022062313/557f2023d8b42a00268b46e7/html5/thumbnails/21.jpg)
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();
Наследование
![Page 22: Всё ли ты знаешь о JavaScript ООП?](https://reader035.vdocuments.mx/reader035/viewer/2022062313/557f2023d8b42a00268b46e7/html5/thumbnails/22.jpg)
Контактная информация
• Технический и проект менеджер
• Горник Виталий, PMP®, Ph.D. in IT (Computer Science)