Class vs static method in JavaScript

Question

I know this will work   function Foo       Foo prototype talk   function          alert  hello  n        var a   new Foo  a talk        hello  n    But if I want to call  Foo talk      this will not work Foo prototype talk      this works correctly   I find some methods to make Foo talk work     Foo   proto     Foo prototype Foo talk   Foo prototype talk   Are there other ways to do this  I don   t know whether it is right to do so  Do you use class methods or static methods in your JavaScript code

User · Answer

Call a static method from an instance   function Clazz       Clazz staticMethod   function         alert  STATIC           Clazz prototype func   function         this constructor staticMethod       var obj   new Clazz    obj func        lt - Alert s  STATIC       Simple Javascript Class Project  https   github com reduardo7 sjsClass

User · Answer

ES6 supports now class  amp  static keywords like a charm     class Foo       constructor           talk             console log  i am not static               static saying             console log this speech              static get speech             return  i am static method

User · Answer

Static method calls are made directly on the class and are not callable on instances of the class  Static methods are often used to  create utility function  Pretty clear description  Taken Directly from mozilla org  Foo needs to be bound to your class Then when you create a new instance you can call myNewInstance foo   If you import your class you can call a static method

User · Answer

I use namespaces    var Foo          element  document getElementById  id-here          Talk  function message                alert  talking       message                 ChangeElement  function                 this element style color    red               And to use it   Foo Talk  Testing      Or   Foo ChangeElement

User · Answer

Javascript has no actual classes rather it uses a system of prototypal inheritance in which objects  inherit  from other objects via their prototype chain  This is best explained via code itself    x000D   x000D  function Foo       x000D     creates a new function object x000D   x000D  Foo prototype talk   function      x000D      console log  hello  n    x000D     x000D     put a new function  object  on the prototype  object  of the Foo function object x000D   x000D  var a   new Foo  x000D     When foo is created using the new keyword it automatically has a reference  x000D     to the prototype property of the Foo function x000D   x000D     We can show this with the following code x000D  console log Object getPrototypeOf a      Foo prototype    x000D   x000D  a talk        hello  n  x000D     When the talk method is invoked it will first look on the object a for the talk method  x000D     when this is not present it will look on the prototype of a  i e  Foo prototype  x000D   x000D     When you want to call x000D     Foo talk    x000D     this will not work because you haven t put the talk   property on the Foo x000D     function object  Rather it is located on the prototype property of Foo  x000D   x000D     We could make it work like this  x000D  Foo sayhi   function      x000D      console log  hello there    x000D     x000D   x000D  Foo sayhi    x000D     This works now  However it will not be present on the prototype chain  x000D     of objects we create out of Foo x000D   x000D   x000D

User · Answer

When you try to call Foo talk  the JS tries to search a function talk through   proto   and  of course  it can t be found   Foo   proto   is Function prototype

User · Answer

First off  remember that JavaScript is primarily a prototypal language  rather than a class-based language1  Foo isn t a class  it s a function  which is an object  You can instantiate an object from that function using the new keyword which will allow you to create something similar to a class in a standard OOP language   I d suggest ignoring   proto   most of the time because it has poor cross browser support  and instead focus on learning about how prototype works   If you have an instance of an object created from a function2 and you access one of its members  methods  attributes  properties  constants etc  in any way  the access will flow down the prototype hierarchy until it either  a  finds the member  or  b  doesn t find another prototype   The hierarchy starts on the object that was called  and then searches its prototype object  If the prototype object has a prototype  it repeats  if no prototype exists  undefined is returned   For example   foo    bar   baz    console log foo bar      logs  baz   foo       console log foo bar      logs undefined  function Foo     Foo prototype    bar   baz    f   new Foo    console log f bar      logs  baz  because the object f doesn t have an attribute  bar     so it checks the prototype f bar    buzz   console log  f bar       logs  buzz  because f has an attribute  bar  set     It looks to me like you ve at least somewhat understood these  basic  parts already  but I need to make them explicit just to be sure   In JavaScript  everything is an object3   everything is an object   function Foo     doesn t just define a new function  it defines a new function object that can be accessed using Foo   This is why you can access Foo s prototype with Foo prototype   What you can also do is set more functions on Foo   Foo talk   function        alert  hello world          This new function can be accessed using   Foo talk      I hope by now you re noticing a similarity between functions on a function object and a static method   Think of f   new Foo    as creating a class instance  Foo prototype bar   function        as defining a shared method for the class  and Foo baz   function        as defining a public static method for the class     ECMAScript 2015 introduced a variety of syntactic sugar for these sorts of declarations to make them simpler to implement while also being easier to read  The previous example can therefore be written as   class Foo     bar            static baz             which allows bar to be called as   const f   new Foo   f bar     and baz to be called as   Foo baz       1  class was a  Future Reserved Word  in the ECMAScript 5 specification  but ES6 introduces the ability to define classes using the class keyword   2  essentially a class instance created by a constructor  but there are many nuanced differences that I don t want to mislead you  3  primitive values mdash which include undefined  null  booleans  numbers  and strings mdash aren t technically objects because they re low-level language implementations  Booleans  numbers  and strings still interact with the prototype chain as though they were objects  so for the purposes of this answer  it s easier to consider them  objects  even though they re not quite

User · Answer

In your case  if you want to Foo talk     function Foo          But use Foo talk would be inefficient Foo talk   function          alert  hello  n        Foo talk        hello  n    But it s an inefficient way to implement  using prototype is better     Another way  My way is defined as static class   var Foo   new function       this talk   function          alert  hello  n               Foo talk        hello  n    Above static class doesn t need to use prototype because it will be only constructed once as static usage        https   github com yidas js-design-patterns tree master class

User · Answer

If you have to write static methods in ES5 I found a great tutorial for that     Constructor var Person   function  name  age     private properties var priv          Public properties this name   name  this age   age     Public methods this sayHi   function        alert  hello             A static method  this method only     exists on the class and doesn t exist      on child objects Person sayName   function        alert  I am a Person object              see  https   abdulapopoola com 2013 03 30 static-and-instance-methods-in-javascript

User · Answer

Just additional notes  Using class ES6  When we create static methods  the Javacsript engine set the descriptor attribute a lil bit different from the old-school  static  method  function Car         Car brand   function       console log  Honda       console log    Object getOwnPropertyDescriptors Car       it sets internal attribute  descriptor property  for brand   to      brand   object Object        configurable  true      enumerable  true      value         writable  true         compared to  class Car2      static brand          console log  Honda            console log    Object getOwnPropertyDescriptors Car2       that sets internal attribute for brand   to     brand   object Object        configurable  true      enumerable  false      value        writable  true           see that enumerable is set to false for static method in ES6    it means you cant use the for-in loop to check the object   for  let prop in Car      console log prop      brand    for  let prop in Car2      console log prop      nothing here     static method in ES6 is treated like other s class private property  name  length  constructor  except that static method is still writable thus the descriptor writable is set to true   writable  true    it also means that we can override it  Car2 brand   function        console log  Toyota        console log    Car2 brand      is now changed to toyota

User · Answer

There are tree ways methods and properties are implemented on function or class objects  and on they instances   On the class  or function  itself   Foo method   or Foo prop  Those are static methods or properties On its prototype   Foo prototype method   or Foo prototype prop  When created  the instances will inherit those object via the prototype witch is  method function         prop       So the foo object will receive  as prototype  a copy of the Foo prototype object  On the instance itself   the method or property is added to the object itself  foo  method function         prop       The this keyword will represent and act differently according to the context  In a static method  it will represent the class itself  witch is after all an instance of Function    class Foo    is quite equivalent to let Foo   new Function     With ECMAScript 2015  that seems well implemented today  it is clearer to see the difference between class  static  methods and properties  instance methods and properties and own methods ans properties  You can thus create three method or properties having the same name  but being different because they apply to different objects  the this keyword  in methods  will apply to  respectively  the class object itself and the instance object  by the prototype or by its own  class Foo     constructor   super          static prop    quot I am static quot     see 1    static method str   alert  quot static method quot  str  quot    quot  this prop      see 1       prop  quot I am of an instance quot      see 2    method str   alert  quot instance method quot  str  quot     quot  this prop      see 2     var foo  new Foo    foo prop    quot I am of own quot       see 3  foo func   function str  alert  quot own method quot    str   this prop      see 3

User · Answer

In additions  now it is possible to do with class and static   use strict   class Foo    static talk          console log  talk         speak          console log  speak             will give   var a   new Foo    Foo talk         talk  a talk          err  is not a function  a speak          speak  Foo speak       err  is not a function

User · Answer

Here is a good example to demonstrate how Javascript works with static instance variables and methods   function Animal name        Animal count   Animal count 1  1    static variables  use function name  Animal      this name   name    instance variable  using  this     Animal showCount   function       static method     alert Animal count     Animal prototype showName function     instance method     alert this name      var mouse   new Animal  Mickey    var elephant   new Animal  Haddoop     Animal showCount        static method  count 2 mouse showName     instance method  alert  Mickey  mouse showCount     Error   mouse showCount is not a function  which is different from  Java

User · Answer

When i faced such a situation  i have done something like this   Logger         info  function  message  tag            var fullMessage                       fullMessage   this  getFormatedMessage message  tag           if  loggerEnabled                console log fullMessage                        warning  function  message  tag            var fullMessage               fullMessage   this  getFormatedMessage message  tag           if  loggerEnabled                console warn fullMessage   enter code here                        getFormatedMessage  function            so now i can call the info method as  Logger info  my Msg    Tag

User · Answer

You can achieve it as below   function Foo        Foo talk   function     alert  I am talking          You can now invoke  talk  function as below   Foo talk      You can do this because in JavaScript  functions are objects as well

[javascript] Class vs. static method in JavaScript

Examples related to javascript

Examples related to oop