JavaScript Class.method和Class.prototype.method之间的区别

JavaScript 是一种面向对象的编程语言，但与其他基于类的语言不同，JavaScript是一种基于原型的语言。这意味着在JavaScript中，可以创建一个对象（原型对象），它充当新对象的模板。这些新对象可以在创建时或运行时提供新的属性。

有两种方法可以向对象添加新的方法。

Class.method： Class.method 是静态的，与类的任何实例无关。类方法必须使用类名调用。在内存中只存在一个此函数的实例。

示例： 此示例展示了上述方法的用法。

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

输出：

Login successful

Class.prototype.method: 创建了与对象实例相关的Class.prototype.method。它使用对象实例名称进行调用。类的每个实例都有自己的这个方法的副本。

示例： 这个示例展示了上述方法的使用。

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

输出：

Login successful
Welcome GFG

上述代码可以使用在ECMAScript 2015中引入的JavaScript类来编写。

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

输出：