What's the difference between static and instance members?

Question

I want to know what the difference between these two functions at this sample class in javascript?

class Sample{
  constructor(){}

  sampleOne(){
    console.log('this is test')
  }
  static sampleTwo(){
    console.log('this is test too')
  }
}

Answer 1

The first one is an instance method . This means, you have to create a new instance of the Sample class to call it:

let instance = new Sample();
instance.sampleOne();

The second one is a static method , so you don't have to have an instance of the class to call it:

Sample.sampleTwo();

Answer 2

Javascript doesn't have classes, therefore explanations in terms of "class" and "instance" are inaccurate. In javascript, there are only objects, which have constructors (functions) and prototypes (other objects). The ES6 "class" syntax is just a decorator, which simply translates java-like class declarations into prototypes, namely:

• classes are turned into constructors (functions):

   class Sample => function Sample()

• ordinary methods are attached to the prototype property of the constructor, and copied to the object.[[Prototype]] later on when you do new Sample() :

   sampleOne => Sample.prototype.sampleOne

• "static" methods are attached directly to the constructor:

   sampleTwo => Sample.sampleTwo

Illustration:

Answer 3

static is a declaration to say this method sampleTwo can be called on the class level and not the instance level. sampleOne however, is an instance method and so you would need to instantiate an instance of your sample class.

const test = Sample();
test.sampleOne(); //works
test.sampleTwo(); //won't work cause it is defined on class level

Sample.sampleOne(); //won't work cause not static defined
Sample.sampleTwo(); //works because it is static.

Answer 4

Static methods are not bound to a class instance. But to the class itself. So while convenient you will not have access to this as there is no instance to point to.

Answer 5

Static methods are called on the class itself.

For example, the following would work perfectly

Sample.sampleOne()
// undefined

while

Sample.sampleTwo()
// this is a test two