Difference between Class.method and Class.prototype.method

JavaScript is an object-oriented programming language, but unlike its peers (which are class-based), JavaScript is a prototype-based language. It means that in JavaScript, you can create an object (prototype object) that acts as a template for new objects. These new objects can be provided with new properties either when you create them or at run time.

There are two ways to add new methods to an object.

  1. Class.method: The Class.method is static and has no relation with any instance of the class. The class method must be called using the class name. Only one instance of this function exists in the memory.

    Example:

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
     
       // Constructor function
       function User(userName) {
         this.userName = userName;
       };
         
       // Static function 
       User.message = function () {
         document.write("Login successful");
       };
         
       // Creating an instance of User
       // using new keyword
       const newUser = new User("GFG");
     
       // Message method accessed with User
       User.message(); 
    </script>

    chevron_right

    
    


    Output:



    Login successful
  2. Class.prototype.method: The Class.prototype.method is created which is related to the instance of the object. It is called using the object instance name. Each instance of the class will have its own copy of this method.

    Example:

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
       function User(userName) {
          this.userName = userName;
        };
          
        User.message = function () {
          document.write("Login successful");
          document.write("<br>");
        };
          
        // Instance method 
        User.prototype.greet = function () {
     
           // can access object properties
           // using 'this' keyword
           document.write("Welcome " + this.userName); 
        };
          
        const newUser = new User("GFG");
        User.message();
     
        // Instance method being accessed 
        // using instance variable
        newUser.greet(); 
    </script>

    chevron_right

    
    


    Output:

    Login successful
    Welcome GFG 

    The above code can be written using JavaScript classes that were introduced in ECMAScript 2015.

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

         
    <script>
      
        // JavaScript class  
        class User {
            constructor(userName) {
                this.userName = userName;
            }
      
            // Corresponds to User.message()
            static message = function () {
                document.write("Login successful");
                document.write("<br>");
            };
      
            // Corresponds to User.prototype.greet()
            greet = function () {
                document.write("Welcome " 
                        + this.userName);
            };
        }
      
        const newUser = new User("GFG");
        User.message();
        newUser.greet();
    </script>

    chevron_right

    
    


    Output:

    Login successful
    Welcome GFG 

    JavaScript classes are syntactical sugar over JavaScript’s prototype-based approach.

  3. full-stack-img




    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


    Article Tags :

    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.