Purpose of Static Methods in ECMAScript 6 Classes

Question

What sort of issues with ES5 are static class methods in ES6 supposed to deal with?

The Babel documentation has the following example in its section regarding ES6 classes, though it does not actually state what this pattern accomplishes.

Classes support prototype-based inheritance, super calls, instance and static methods and constructors

class SkinnedMesh extends THREE.Mesh {
  constructor(geometry, materials) {
    super(geometry, materials);

    this.idMatrix = SkinnedMesh.defaultMatrix();
    this.bones = [];
    this.boneMatrices = [];
    //...
  }
  update(camera) {
    //...
    super.update();
  }
  static defaultMatrix() {
    return new THREE.Matrix4();
  }
}

Personally, I use the static keyword to indicate to the developer that this method doesn't use information from the current instance - similar to using underscore-prefixed names to indicate private properties - even though that may not necessarily be the case, it's a nice bit of self-commenting if used correctly — CodingIntrigue
– CodingIntrigue, Commented Jun 15, 2015 at 11:38
May I suggest to rename 'defaultMatrix' to 'createDefaultMatrix', because it is a very classical 'Factory Method' pattern (encapsulation of 'new' operator), and many agree to that convention. — Martin Meeser
– Martin Meeser, Commented Apr 14, 2016 at 9:29
@MartinMeeser As stated in the question, this code was pulled from Babel's documentation. — Walter Roman
– Walter Roman, Commented Apr 19, 2016 at 19:47

Matías Fidemraizer · Accepted Answer · 2018-01-11 23:09:07Z

9

If you compile ES6 code with Babel, and some class contains a static method, ES5-generated code will be just adding that static function to the constructor function.

So, this ~~ES6~~ ES2015 code:

class A {
   static doStuff() {}
}

...equals (in ES5):

function A() { }
A.doStuff = function() { };

Why you need static functions? Well, transpiled code won't support statics at all, since even functions are objects and static functions are turned into own properties of constructor function.

Static functions or properties can be used to implement factory pattern:

class A {
   static create() {
      // Specific factory method code
   } 
}

var instance = A.create();

Anyway, static member usage is a very diffuse topic and it goes out of scope of an objective answer. It has a lot of use cases and these are universal to any programming language.

edited Jan 11, 2018 at 23:09

answered Jun 14, 2015 at 5:24

Matías Fidemraizer

65.1k19 gold badges132 silver badges216 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

1252748 Over a year ago

what is a constructor function object functions?

Matías Fidemraizer Over a year ago

@1252748 An own property of constructor function. I'm going to edit.

1252748 Over a year ago

Oh, that is a bit clearer, yes. But I am not the OP, I was just browsing the topic and stumbled upon your explanation. Thanks though :)

Matías Fidemraizer Over a year ago

@1252748 You don't need to necessarily be the OP to suggest improvements :D

Community · Accepted Answer · 2017-05-23 11:53:12Z

4

Consider class that contains only static methods:

class MyNamespace {
  static foo() { ... }
  static bar() { foo(); }
}

It is quite convenient way of organizing code - put stuff in namespaces.

MyNamespace.foo();
MyNamespace.bar();

That's other than standard static method use cases in other OOP languages.

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Jun 14, 2015 at 5:23

c-smile

27.6k8 gold badges66 silver badges91 bronze badges

7 Comments

Bergi Over a year ago

Use object literals for namespaces. Not empty classes.

c-smile Over a year ago

@Bergi Object literals have very inconvenient syntax for that purpose. You have to remember to put , and use anonymous functions, etc.

Bergi Over a year ago

There's no reason to anonymous functions? You can just do const MyNamespace = { foo() { … }, bar() { … } };

c-smile Over a year ago

@Bergi Commas are mandatory in object literals. So if you have large functions you will easily get lost in sequences like {}}},},}; and the like... Anyway it is a matter of taste, both cases are conceptually the same.

Bergi Over a year ago

@1252748 Whenever you have functions that do not operate on an instance but definitely relate to the class, you can put them as static methods on the class (where the constructor acts as a namespace). However, this does not work the other way round: if you want to make a namespace but don't have instances or a constructor, do not use class.

|

Collectives™ on Stack Overflow

Purpose of Static Methods in ECMAScript 6 Classes

2 Answers 2

4 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related