Diferencia entre Class.method y Class.prototype.method

JavaScript es un lenguaje de programación orientado a objetos, pero a diferencia de sus pares (que están basados ​​en clases), JavaScript es un lenguaje basado en prototipos. Significa que en JavaScript, puede crear un objeto (objeto prototipo) que actúa como una plantilla para nuevos objetos. Estos nuevos objetos se pueden proporcionar con nuevas propiedades cuando los crea o en tiempo de ejecución.

Hay dos formas de agregar nuevos métodos a un objeto.

1. Class.method : Class.method es estático y no tiene relación con ninguna instancia de la clase. El método de clase debe llamarse usando el nombre de la clase. Solo existe una instancia de esta función en la memoria.

   Ejemplo:

   JavaScript

   <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>

   Producción:

   Login successful

2. Class.prototype.method: se crea Class.prototype.method , que está relacionado con la instancia del objeto. Se llama usando el nombre de la instancia del objeto. Cada instancia de la clase tendrá su propia copia de este método.

   Ejemplo:

   JavaScript

   <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>

   Producción:

   Login successful
   Welcome GFG 

   El código anterior se puede escribir usando clases de JavaScript que se introdujeron en ECMAScript 2015.

   JavaScript

   <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>

   Producción:

   Login successful
   Welcome GFG 

   Las clases de JavaScript son azúcar sintáctica sobre el enfoque basado en prototipos de JavaScript.