JavaScript Class method vs Class prototype method

Question

What is the difference between the following two declarations   Class method   function         code      Class prototype method   function         code using this values        Is it okay to think of the first statement as a declaration of a static method  and the second statement as a declaration of an instance method

User · Answer

For visual learners  when defining the function without  prototype  ExampleClass   function      ExampleClass method   function customString                console log  customString     undefined                              customString                               called from func def      ExampleClass method        gt  gt  output   called from func def      var someInstance   new ExampleClass    someInstance method  Called from instance            gt  gt  error   someInstance method is not a function        With same code  if  prototype is added     ExampleClass prototype method   function customString                console log  customString     undefined                              customString                               called from func def      ExampleClass method                gt  error   ExampleClass method is not a function      var someInstance   new ExampleClass    someInstance method  Called from instance                         gt  output   Called from instance      To make it clearer     ExampleClass   function      ExampleClass directM   function        M for method ExampleClass prototype protoM   function      var instanceOfExample   new ExampleClass     ExampleClass directM          works instanceOfExample directM      x Error   ExampleClass protoM        x Error  instanceOfExample protoM       works       Note for the example above  someInstance method   won t be executed as  ExampleClass method   causes error  amp  execution cannot continue  But for the sake of illustration  amp  easy understanding  I ve kept this sequence       Results generated from chrome developer console  amp  JS Bin Click on the jsbin link above to step through the code  Toggle commented section with ctrl

User · Answer

When you create more than one instance of MyClass   you will still only have only one instance of publicMethod in memory but in case of privilegedMethod you will end up creating lots of instances and staticMethod has no relationship with an object instance   That s why prototypes save memory   Also  if you change the parent object s properties  is the child s corresponding property hasn t been changed  it ll be updated

User · Answer

Yes  the first one is a static method also called class method  while the second one is an instance method   Consider the following examples  to understand it in more detail   In ES5   function Person firstName  lastName       this firstName   firstName     this lastName   lastName     Person isPerson   function obj       return obj constructor     Person     Person prototype sayHi   function        return  Hi     this firstName      In the above code  isPerson is a static method  while sayHi is an instance method of Person   Below  is how to create an object from Person constructor   var aminu   new Person  Aminu    Abubakar     Using the static method isPerson   Person isPerson aminu      will return true  Using the instance method sayHi   aminu sayHi       will return  Hi Aminu   In ES6  class Person      constructor firstName  lastName          this firstName   firstName        this lastName   lastName           static isPerson obj          return obj constructor     Person           sayHi           return  Hi   this firstName             Look at how static keyword was used to declare the static method isPerson   To create an object of Person class   const aminu   new Person  Aminu    Abubakar     Using the static method isPerson   Person isPerson aminu      will return true  Using the instance method sayHi   aminu sayHi       will return  Hi Aminu   NOTE  Both examples are essentially the same  JavaScript remains a classless language  The class introduced in ES6 is primarily a syntactical sugar over the existing prototype-based inheritance model

User · Answer

A  Static Method        Class method   function         code        method   here is a function property added to an another function  here Class   You can directly access the method   by the class   function name  Class method    No need for creating any object instance  new Class    for accessing the method    So you could call it as a static method   B  Prototype Method  Shared across all the instances        Class prototype method   function         code using this values        method   here is a function property added to an another function protype  here Class prototype   You can either directly access by class name or by an object instance  new Class     Added advantage - this way of method   definition will create only one copy of method   in the memory and will be shared across all the object s instance s created from the Class  C  Class Method  Each instance has its own copy      function Class            this method   function         do something with the private members             method   here is a method defined inside an another function  here Class   You can t directly access the method   by the class   function name  Class method    You need to create an object instance  new Class    for the method   access  This way of method   definition will create a unique copy of the method   for each and every objects created using the constructor function  new Class     Added advantage - Bcos of the method   scope it has the full right to access the local members also called private members  declared inside the constructor function  here Class   Example      function Class             var str    quot Constructor method quot      private variable         this method   function      console log str                Class prototype method   function     console log  quot Prototype method quot           Class method   function     console log  quot Static method quot            new Class   method           Constructor method        Bcos Constructor method   has more priority over the Prototype method           Bcos of the existence of the Constructor method    the Prototype method         will not be looked up  But you call it by explicity  if you want         Using instance     new Class   constructor prototype method       Prototype method         Using class name     Class prototype method       Prototype method         Access the static method by class name     Class method                 Static method

User · Answer

Yes  the first function has no relationship with an object instance of that constructor function  you can consider it like a  static method    In JavaScript functions are first-class objects  that means you can treat them just like any object  in this case  you are only adding a property to the function object   The second function  as you are extending the constructor function prototype  it will be available to all the object instances created with the new keyword  and the context within that function  the this keyword  will refer to the actual object instance where you call it   Consider this example      constructor function function MyClass        var privateVariable     private member only available within the constructor fn    this privilegedMethod   function         it can access private members                     A  static method   it s just like a normal function     it has no relation with any  MyClass  object instance MyClass staticMethod   function         MyClass prototype publicMethod   function           the  this  keyword refers to the object instance      you can access only  privileged  and  public  members     var myObj   new MyClass       new object instance  myObj publicMethod    MyClass staticMethod

[javascript] JavaScript: Class.method vs. Class.prototype.method

Examples related to javascript

Examples related to oop

Examples related to prototype-programming