Console Learner — An interactive JavaScript course.

5.1 Classes vs. Prototypes

JavaScript objects are prototype-based, not class-based. It is a more generic model:

  1. Ad-hoc singleton objects are easily created and very usable (e.g. most instances of Object).
  2. Properties and methods can be added or modified at any time to any object.
  3. Any object instance can be reused (cloned or copied), without the need to define a class.
  4. Prototype modifications affects all instances, even those previously created.

Nonetheless, words like class and similar are frequently used as synonyms for prototype, etc.

>>>
var A = class {
    a = 123;
    b;
    sum() {
        return this.a + this.b;
    };
};

  

    
    The
    class
    syntax (introduced in ES6) simplifies the creation of
    prototype chains. Note
    that method functions are declared with the shorthand syntax, omitting the
    function keyword.
  


  

    
>>>

    
print(new A(), true);

  

  

  

    
    Fields are added to the instance and set to undefined by
    default.
  


  

    
>>>

    
typeof(A.prototype.sum)

  

  
"function"

  

    
    Methods are non-enumerable (i.e. "invisible") and added to the prototype,
    which makes it safe to use Object.keys() and similar.
  


  

    
>>>

    
var o = new A();
o.b = 77;
print(o.sum());

  

  

  

    
    There is little difference in practical usage, compared to objects created
    by an old-style
    constructor function.
  


  

    
>>>

    
var B = class extends A {
    constructor(val) {
        super();
        this.b = val;
    }
};

  

  

  

    
    Creating a subclass is easy using the extends keyword.
    The special constructor method is automatically called
    when new objects are created.
  


  

    
>>>

    
print(new B(77), true);

  

  

  

    
    Instance fields from the parent class are initialized also in the
    subclass.
  


  

    
>>>

    

    
    
        
    
  







  
The console allows you to interact with the course material and
  examples. Use the following keys:

  
  
A special logging function is also available:

  




  



    

    

      

        
      

      

        Need more magic? Check out the other
        developer tools
        on this site.