Thursday, September 27, 2018

Static variables in JavaScript



How can I create static variables in Javascript?


Answer



If you come from a class-based, statically typed object-oriented language (like Java, C++ or C#) I assume that you are trying to create a variable or method associated to a "type" but not to an instance.



An example using a "classical" approach, with constructor functions maybe could help you to catch the concepts of basic OO JavaScript:



function MyClass () { // constructor function
var privateVariable = "foo"; // Private variable

this.publicVariable = "bar"; // Public variable

this.privilegedMethod = function () { // Public Method
alert(privateVariable);
};
}

// Instance method will be available to all instances but only load once in memory
MyClass.prototype.publicMethod = function () {
alert(this.publicVariable);
};

// Static variable shared by all instances
MyClass.staticProperty = "baz";

var myInstance = new MyClass();


staticProperty is defined in the MyClass object (which is a function) and has nothing to do with its created instances, JavaScript treats functions as first-class objects, so being an object, you can assign properties to a function.



UPDATE: ES6 introduced the ability to declare classes through the class keyword. It is syntax sugar over the existing prototype-based inheritance.



The static keyword allows you to easily define static properties or methods in a class.



Let's see the above example implemented with ES6 classes:





class MyClass {
// class constructor, equivalent to
// the function body of a constructor
constructor() {
const privateVariable = 'private value'; // Private variable at the constructor scope
this.publicVariable = 'public value'; // Public property

this.privilegedMethod = function() {
// Public Method with access to the constructor scope variables
console.log(privateVariable);
};
}

// Prototype methods:
publicMethod() {
console.log(this.publicVariable);
}

// Static properties shared by all instances
static staticProperty = 'static value';

static staticMethod() {
console.log(this.staticProperty);
}
}

// We can add properties to the class prototype
MyClass.prototype.additionalMethod = function() {
console.log(this.publicVariable);
};

var myInstance = new MyClass();
myInstance.publicMethod(); // "public value"
myInstance.additionalMethod(); // "public value"
myInstance.privilegedMethod(); // "private value"
MyClass.staticMethod(); // "static value"




No comments:

Post a Comment

plot explanation - Why did Peaches' mom hang on the tree? - Movies & TV

In the middle of the movie Ice Age: Continental Drift Peaches' mom asked Peaches to go to sleep. Then, she hung on the tree. This parti...