Object oriented Javascript

Object oriented Javascript

1. 1. SCOPES

   • Lexical scope
     • - Can get variable by name without getting errors
     • Global scope (shared between multiple files in some JS envs)
     • - new lexical scope is created in every new function definition (only fun, not if, while, etc.)
     • Local function scope
   • Execution contexts (in memory scopes)
     • - new ex. context is created each time a function is RUN
     • - for each lexical scope, there can be more in-memory scopes created during each function execution
     • - memory storage areas with key-value pairs representing variables
     • - entries created during execution

2. 2. CLOSURES

   • - any function that remains available after the outer scopes around it have returned
     • After it gets executed, it will still run in the context of the same exec context it was defined in

3. 3. PARAMETERS

   • Function parameters (take in arguments to the function), part of function signature
   • "this" parameter
     • Binding value to "this"
       • Bound to the object used when invoking the function which contains usage of "this" param.
         • e.g. obj.fn(3,4);
           • var obj = {   fn: function(a, b) {     log(this); }}; obj2 = { method: obj.fn }; The following invocation of function through an object: obj.fn(3,4); Inside that invocation of the fn, "this" would refer to object "obj" !!!! In the case of obj2.method(4,5); , "this" would refer to obect "obj2"
       • If invoked outside of the object, "this" will imply the GLOBAL OBJECT
       • If invoked with fn.call(thisValue, 3, 4); we can choose what value "this" will be bound to
       • (check the note for examples)
         • var fn = function(one, two) {   log(this, one, two); }; var r={}, g={}, b={}, y={}; r.method = fn; var setTimeout = function(cb, to) {   // after to   fn(); } r.method(g,b); // r, g, b fn(g, b); // <global>. g, b fn.call(r,g,b); // r, g, b r.method.call(y,g,b); // y, g, b setTimeout(fn, 1000); // <global>, undefined, undefined setTimeout(r.method, 1000); // <global>, undefined, undefined setTimeout(function() { r.method(g,b); }, 1000) // to force "this" binding in a callback log(one); // throws an error log(this); // <global> ==> has been removed in new JS specs new r.method(g,b); // new_object, g, b

4. 4. PROTOTYPE CHAINS

   • A mechanism of delegating failed lookups from one object to another one
     • Use one object as a prototype to create a second object with Object.create(protoObject) (see note)
       • var gold = {a: 1}; var rose = Object.create(gold); rose.b = 2; log(rose.a); // outputs "1"
       • The Object prototype
         • All object eventually have one common "Object" prototype. That's why you can e.g. access anyObject.toString() method
         • Contains "constructor" property which points to the constructor function (object) used to create objects
       • Some other object prototypes, e.g. Array, have their own constructor method which prevents delegating to the constructor property of the object prototype
   • Make objects "similar" to other objects

5. 7. CLASS PATTERNS

   • OBJECT DECORATOR
     • Instead of: var amyCar = {loc: 1}; var benCar = {loc: 9}; define the following: var carlike = function(obj, loc) {   obj.loc = loc;   return obj; }; amyCar = carlike({},1); benCar = carlike({}, 9);
     • Augments the object with new properties (even functions). Uses adjectives for name, e.g. carlike()
       • var carlike = function(obj, loc) {   obj.loc = loc;   obj.move = move;   return obj; }; var move = function() {   this.loc++; }; var amy = carlike({}, 1); amy.move(); var ben = carlike({}, 9); ben.move(); console.log(amy.loc); // 2 console.log(ben.loc); // 10
       • Used when you want to add some functionality to an object that already has some functionality already at that point
       • Difference between defining a function outside of the object decorator and inside
         • This: var carlike = function(obj, loc) {   obj.loc = loc;   obj.move = move;   return obj; }; var move = function() {   this.loc++; }; For every carlike object created there is a "move" attribute which points to the same function "move()" in the same place in memory. While if defined like this: var carlike = function(obj, loc) {   obj.loc = loc;   obj.move = function() {     obj.loc++;   };   return obj; }; For every carlike object created you have a separate copy of the function move() created. Much clearer but takes more memory. Also here it's not necessary to use "this" reference, since you can use "obj" because of closures.
   • 5. FUNCTIONAL PATTERN
     • Powerful form of functions which are used to manufacture fleets of similar objects
       • These type of classes are called "CONSTRUCTOR FUNCTIONS"
         • e.g. var Car = function(loc) {   var obj = {loc: loc};   obj.move = function() {     obj.loc++;   };   return obj; };
         • Functional Shared Pattern
           • 1. Example
             • var Car = function(loc) {   var obj = {loc: loc};   obj.move = move;   return obj; }; var move = function() {   obj.loc++; };
             • 2. Example - add methods to Classes dinamically
               • var Car = function(loc) {   var obj = {loc: loc};   //extend should be impl.     extend(obj, Car.methods);     return obj; }; Car.methods = {     move: function() {        this.loc++;     }     ... (more fs could be added) };
       • Named as a noun with a capital first letter
     • Class vs. Decorator
       • Class - Builds an object which it is going to augment
       • Decorator - Augments already existing object
   • 6. PROTOTYPAL PATTERN
     • Object.create(obj); --> obj is whatever object the calls to nonexistent properties will be delegated to
       • 3. Example
         • Enables us to prevent copying properties over to every new object created
         • Instead of defining an object Car.methods, we can use already prepared object in the language provided for us --> prototype
           • 4. Example
             • The Car function does NOT delegate its' failed lookups to Car.prototype! Car.prototype is provided just for storing things and no special characteristics that would enable automatically to delegate the failed lookups. You have to choose which object will delegate to Car.prototype by using Object.create(Car.prototype);
           • This prototype object has a special property called "constructor" which points back to the function which has that prototype
             • In this case Car.prototype.constructor points to function Car, which we can use to find the function which created an object in question, i.e. amy.constructor() should give back Car (actually value of Car)
             • "instanceof" operator
               • Checking if right operands .prototype object can be found anywhere in the left operands prototype chain, e.g "amy instanceof Car" --> true
   • PSEUDOCLASSICAL PATTERN
     • Similar to prototypal
     • Keyword "new"
       • 5. Example
         • By using the new keyword, the Car constructor gets two hidden lines by the compiler in the background.  The first line of Car function that gets added at the beginning: this = Object.create(Car.prototype); Second line that gets added at the end: return this; So, we can remove the corresponding lines from the PROTOTYPAL pattern example.
       • Use "new" to instantiate the object --> get free object construction and have it returned from the constructor func. automatically
       • By using "new", the constructor will have hidden code for construction of new object base on the constructor's .prototype and also for returning the new object from the constructor function
     • Performance optimized as compared to PROTOTYPAL
     • Two distinct sections in pseudoclassical and prototypal patterns
       • .prototype section
         • Used to define the common (shared) behaviour between multiple object instances
       • constructor f. section
         • Used to define unique properties and behaviour specific only to the object instance
   • Superclass and subclass
     • Superclass - Used to have general properties common to one type of object
     • Subclass - Used to specify specific properties for an object that inherits common ones from the superclass
     • Funcional pattern*
       • Example - Car, Van, Cop
     • Prototypal pattern* & Pseudoclassical pattern
       • Never add "Van.prototype = new Car();" even if some sites endorse it
         • Only Van.prototype = Object.create(Car.prototype);

Bilder und Dateien der Mindmap

• 
• Property access - Object-Oriented JavaScript (Einbetten)
• 
• 
• 
• 
•