Горник Виталий, PMP® Ph.D. in IT (Computer Science)

Всё ли ты знаешь о JavaScript ООП?

Управляющий код процедурного программирования постоянно обрабатывает различные ситуации.

Управляющий код ООП старается передать ответственность исполнителю - объектам системы.

Процедурное vs ООП

Month

1

Month

4

Month

7

Month

10

Month

13

Month

16

Month

19

Month

22

Month

250

5

10

15

20

25

30

Проц.ООП

Ваши усилия и нервы на проекте

удовлетворённость работой обратно пропорциональна

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

Три столпа ООП

1. Инкапсуляция через замыкания

2. Наследование через прототипирование

3. Полиморфизм а js не типизированный язык

1. интерфейсов и абстрактных классов*

2. финальных классов

3. protected

4. статических членов классов

в JS нет

this

var obj = { outerWidth : 20 };function getWidth() { return this.outerWidth; }

var a = getWidth ();var b = getWidth.apply(obj);

this указывает на объект в контексте которого работает код

Изменение this?

1. var obj = new SomeFunction(…); // создаваемый объект

2. obj.publicFunction(….); // obj

3. someFunction.apply(obj,[arg1,arg2,….]); // obj

4. someFunction.call(obj, arg1,arg2,….); // obj

Вперёд!!!

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

A

Function

Object

prototype

__proto__

prototype

__proto__

prototype

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

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

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__

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

Простой объект, 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();

Простой класс

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

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();

Убей конструктор

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();

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() )();

Сложный класс

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

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();

Наследование

Контактная информация

• Технический и проект менеджер

• Горник Виталий, PMP®, Ph.D. in IT (Computer Science)

• vhornik@gmail.com