Class vs. static method in JavaScript

I know this will work:

function Foo() {}; = function () {

var a = new Foo;; // 'hello~\n'

But if I want to call // this will not work // this works correctly

I find some methods to make work,

  1. Foo.__proto__ = Foo.prototype
  2. =

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?

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(; // logs "baz"

foo = {};
console.log(; // logs undefined

function Foo(){}
Foo.prototype = {bar: 'baz'};
f = new Foo();
// logs "baz" because the object f doesn't have an attribute "bar"
// so it checks the prototype = 'buzz';
console.log( ); // 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: = function () {
  alert('hello world!');

This new function can be accessed using:;

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, = 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()

and baz to be called as:


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—which include undefined, null, booleans, numbers, and strings—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.

You can achieve it as below:

function Foo() {}; = function() { alert('I am talking.'); };

You can now invoke "talk" function as below:;

You can do this because in JavaScript, functions are objects as well. "zzzzBov" has answered it as well but it's a lengthy read.

Call a static method from an instance:

function Clazz() {};
Clazz.staticMethod = function() {

Clazz.prototype.func = function() {

var obj = new Clazz();
obj.func(); // <- Alert's "STATIC!!!"

Simple Javascript Class Project:

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" = name; //instance variable, using "this"

Animal.showCount = function () {//static method

Animal.prototype.showName=function(){//instance method

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

In additions, now it is possible to do with class and static

'use strict'

class Foo {
 static talk() {

 speak() {


will give

var a = new Foo();;  // 'talk';    // err 'is not a function'
a.speak();   // 'speak'
Foo.speak(); // err 'is not a function'

I use namespaces:

var Foo = {
     element: document.getElementById("id-here"),

     Talk: function(message) {
            alert("talking..." + message);

     ChangeElement: function() {
   = "red";

And to use it:




ES6 supports now class & static keywords like a charm :

class Foo {
    constructor() {}

    talk() {
        console.log("i am not static");

    static saying() {

    static get speech() {
        return "i am static method";


If you have to write static methods in ES5 I found a great tutorial for that:

var Person = function (name, age){
//private properties
var priv = {};

//Public properties = name;
this.age = age;

//Public methods
this.sayHi = function(){

// 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 @

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() {


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() {


that sets internal attribute for brand() to

brand: [object Object] {
    configurable: true,
    enumerable: false,
    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() {

  Car2.brand() // is now changed to toyota

When you try to call, the JS tries to search a function talk through __proto__ and, of course, it can't be found.

Foo.__proto__ is Function.prototype.

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

Foo needs to be bound to your class Then when you create a new instance you can call If you import your class you can call a static method

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) {
    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"my Msg", "Tag");

In your case, if you want to

function Foo() {};
// But use would be inefficient = function () {
};; // '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() { = function () {
};; // 'hello~\n'

Above static class doesn't need to use prototype because it will be only constructed once as static usage.

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:

function Foo() {};
// creates a new function object = function () {
// put a new function (object) on the prototype (object) of the Foo function object

var a = new Foo;
// When foo is created using the new keyword it automatically has a reference 
// to the prototype property of the Foo function

// We can show this with the following code
console.log(Object.getPrototypeOf(a) === Foo.prototype);; // 'hello~\n'
// When the talk method is invoked it will first look on the object a for the talk method,
// when this is not present it will look on the prototype of a (i.e. Foo.prototype)

// When you want to call
// this will not work because you haven't put the talk() property on the Foo
// function object. Rather it is located on the prototype property of Foo.

// We could make it work like this:
Foo.sayhi = function () {
    console.log('hello there');

// This works now. However it will not be present on the prototype chain 
// of objects we create out of Foo