Please enable JavaScript.

Coggle requires JavaScript to display documents.

13.1: OOP: constructors and prototypes - Coggle Diagram

- - - - and instantiate an object from it
      - classes can inherit from one another
      - objects are copies of the class
  - - - JS is not a true class-based language
    - - the linking doesn't have to be tree-shaped
      - prototypal inheritance
- - - - by invoking with new
        
        :!:which makes the function into a constructor
      - all objects thus created
        
        share the same prototype
    - - when a function is called as a constructor
      - this is set as the prototype of the newly constructed object
      - by convention, in the property named __proto__
  - - - an object that will be used as the new object's prototype
  - - - messing with inheritance
      - also slow
- - - - that created the instance
      - a reference to the constructor function #
    - - on its Object prototype
      - Object.prototype.constructor
  - - - var objProto = { greet: function() { console.log(this.greeting + " World"); } }; var Greeting = function(term) { this.greeting = term; }; Greeting.prototype = objProto; var obj1 = new Greeting("Hi"); console.log(obj1 instanceof Greeting); console.dir(obj1.constructor); console.dir(obj1);
      - outputs
        
        the constructor property
        
        no longer points to the Greeting constructor function
        
        but the object is of still of type Greeting
        
        so it has been constructed from the Greeting constructor
        
        > true > ƒ Object() > Greeting greeting: "Hi" > [[Prototype]]: Object <----- objProto prototype > greet: ƒ ()) > [[Prototype]]: Object <----- Object prototype > constructor: ƒ Object()
        
        if we look at the Greeting prototype
        
        we can see the greet function
        
        which has been set to objProto
        
        the constructor property
        
        is now found on
        
        the prototype of the prototype
        
        and it points to
        
        Object.prototype
        
        :warning:not the Greeting constructor function
    - - the fix is to reassign the constructor property
        
        as before... Greeting.prototype.constructor = Greeting; console.log(obj1 instanceof Greeting); console.dir(obj1.constructor); console.dir(obj1);
        
        outputs
        
        > true > ƒ Greeting(term) > Greeting greeting: "Hi" > [[Prototype]]: Object <----- objProto prototype > constructor: ƒ (term) > greet: ƒ ()) > [[Prototype]]: Object <----- Object prototype > constructor: ƒ Object()
        
        if we look at the Greeting prototype
        
        we can see the greet function
        
        which has been set to objProto
        
        the constructor property
        
        is now found on
        
        the objProto prototype
        
        and it again points to
        
        :explode: the Greeting constructor function
  - - - > true > ƒ Greeting(term) . . . name: "Greeting" > Greeting greeting: "Hi" > [[Prototype]]: Object <----- Object prototype > constructor: ƒ (term) > [[Prototype]]: Object
      - the constructor property
        
        points to
        
        the Greeting constructor function
      - and the object is of type Greeting