2. 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
4. …and a new project task will make you totally happy!
Like this…
5. 3 major principles of OOP
1. Encapsulation by means of closures
2. Inheritance via prototyping
3. Polymorphism - JS is not a typed language
6. 1. interfaces and abstract classes*
2. final classes
3. protected modifiers
4. static class members
JS doesn’t have
7. 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
8. 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
9.
10. 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
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; //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__
15. 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();
16. 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
works
var obj2 = A(); // obj2 is a window
obj2.AA1(1); // which doesn’t have AA1
17. 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
18. Private members
function 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();
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() )();
Сomplex class
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"
Complex 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();
Inheritance
22. Contact info:
• Technical and project manager
• Vitali Hornik, PMP®, Ph.D. in IT (Computer Science)
• vhornik@gmail.com
