4front en
Upcoming SlideShare
Loading in...5
×
 

4front en

on

  • 382 views

JavaScript, OOP, objects, prototype, __proto__

JavaScript, OOP, objects, prototype, __proto__

Statistics

Views

Total Views
382
Views on SlideShare
115
Embed Views
267

Actions

Likes
1
Downloads
3
Comments
0

4 Embeds 267

http://xbsoftware.com 255
http://192.168.3.198 9
http://www.tuicool.com 2
http://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

4front en 4front en Presentation Transcript

  • 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
  • 0 5 10 15 20 25 30 Month1 Month3 Month5 Month7 Month9 Month11 Month13 Month15 Month17 Month19 Month21 Month23 Month25 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
  • 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); // undefined alert(obj.__proto__ === A.prototype); // true alert(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 works var obj2 = A(); // obj2 is a window obj2.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 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();
  • 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