4front en

Vitali Hornik, PMP® Ph.D. in IT (Computer Science)

Do you know everything about JavaScript OOP?

The main code of procedural programming is constantly processing various situations.

The main code of OOP tries to pass responsibility to the executor - system objects.

Procedural Programming vs OOP

Month

1

Month

3

Month

5

Month

7

Month

9

Month

11

Month

13

Month

15

Month

17

Month

19

Month

21

Month

23

Month

250

5

10

15

20

25

30

Pct.OOP

Your efforts and worries at the project

Job satisfaction is inversely proportional to them

…and a new project task will make you totally happy! Like this…

3 major principles of OOP

1. Encapsulation by means of closures

2. Inheritance via prototyping

3. Polymorphism - JS is not a typed language

1. interfaces and abstract classes*

2. final classes

3. protected modifiers

4. static class members

JS doesn’t have

this

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

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

this points to the object in the context of which the code works

Can this be changed?

1. var obj = new SomeFunction(…); // the created object

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

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

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

Go ahead!!!

prototype and/or __proto__

function A() {….}

A.prototype – an object with one property «constructor».A.prototype.constructor – function А

A.__proto__ – Function.prototype, the child of Object. Object is the parent of everything.

alert(A.__proto__ === A.prototype.constructor.__proto__ ); // true

A

Function

Object

prototype

__proto__

prototype

__proto__

prototype

prototype – specifies the properties of created objects__proto__ – everything has __proto__ , it serves for parent/child connection

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; //a property added into constructor

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”

A few more words about prototype and __proto__

…dive cheerfully into the code …

Simple object, singleton

var obj = {

v : "prop", AA1 : function(t){

alert(this.v + t);}

}; // "obj" – is "new Object()" that has the keys "v" and "AA1"

obj.AA2 = function(…){…..}; // AA2 key is added to A

obj.AA1(1);obj.AA2();

Simple class

function A() { this.v = 'prop'; return this; }A.prototype.AA1 = function(){…};

var obj = new A(); // “v” – property of the obj object// АА1 – property of the object prototype

A.prototype.AA2 = function(t) { alert(this.v+t); };obj.AA2(2); // that’s why a1.__proto__ === A.prototype worksvar obj2 = A(); // obj2 is a windowobj2.AA1(1); // which doesn’t have AA1

function A() { return this; }A.prototype = {

v : 'prop + ', AA1 : function(){….}

}; // "A.prototype" turned into "new Object()"// А.prototype.constructor is not A

var obj = new A();A.prototype.AA2 = function(){….};obj.AA1();

Kill the constructor

Private membersfunction A(){

var p1 = 1; // visible inside of “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() )();

Сomplex class

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"

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

Inheritance

Contact info:

• Technical and project manager

• Vitali Hornik, PMP®, Ph.D. in IT (Computer Science)

• vhornik@gmail.com