19 Jan
2011

Basic JavaScript Part 7: Static Properties and Methods

Category:UncategorizedTag: :

Here are the links to the previous installments:

  1. Functions
  2. Objects
  3. Prototypes
  4. Enforcing New on Constructor Functions
  5. Hoisting
  6. Automatic Semicolon Insertion
    In this post, I?m going to quickly show you how to set up static properties and methods in JavaScript. This can come in handy for constant values and/or utility functions. C# and most other class-based languages have a special syntax for static members. Not so for JavaScript. Although JavaScript doesn?t provide a dedicated syntax for static members, we?re still able to get what we want by adding properties and methods to a constructor function. This is possible because functions in JavaScript are plain objects that can have properties and methods of their own. 
    Let?s show some code.
    function Podcast() {};
    
    Podcast.FILE_EXTENSION = 'mp3';
    Podcast.download = function(podcast) {
        console.log('Downloading ' + podcast + ' ...');
    };
    
    Podcast.prototype.play = function() {
        console.log('Playing this podcast ...');
    };

Here we created a constructor function named Podcast with a static property called FILE_EXTENSION and a static method named download. We also added the instance method play() to the prototype of our constructor function.

Getting the value of a static property or invoking a static method is done as follows:

Podcast.FILE_EXTENSION;                // 'mp3'
Podcast.download('Astronomy cast');    // 'Downloading Astronomy cast ...'

When we create a Podcast object and invoke the instance method play(), we obviously get the expected outcome.

new Podcast().play();    // 'Playing this podcast ...'

But it?s surely not possible to statically invoke an instance method like so:

Podcast.play();        // undefined

It?s also not possible to invoke a static method on a Podcast instance object either.

new Podcast().download('Railscasts');    // undefined

There you go. Knowing how to provide static members in JavaScript might come in handy when you feel inspired of writing your own Math class in JavaScript :-).

Until next time.

4 thoughts on “Basic JavaScript Part 7: Static Properties and Methods

  1. Why are you using a function to hang these static methods off instead of just using a global object?

    Just saying:

    Podcast = {}

    seems to do the same thing.

  2. You could also just as easily put the static properties inside of the function along with your non-static properties. ex:

    function Podcast() {
    Podcast.FILE_EXTENSION = ‘mp3’;

    // static defined as property of Podcast
    Podcast.download = function(podcast) {
    console.log(‘Downloading ‘ + podcast + ‘ …’);
    }

    // non-static defined as property of this
    this.play = function() {
    console.log(‘Playing this podcast …’);
    }
    }

  3. I take that back, seems to have some unintended consequences where the static properties will get redefined each time the class is instantiated. Works fine if they are constants, but not so much otherwise.

Comments are closed.