Classes with Javascript

How does a fully fledged Javascript class looks like?

This was the first thing that came to my mind when I got serious about learning Javascript.

Javascript doesn’t have a separate concept of classes like in Java. What a Java developer might associate with classes in javascript are functions that can be used to create objects.

The one I could easily relate to was creating a constructor function, this will act like a class ins Javascript allowing us to create objects from it.

function Car(make, model){
    this.make = make;
    this.model = model;

    this.honk = function(){
        alert("Honk from "+ make + " " + "model");
    };
 }

We can create new objects using the constructor function we created above like this

var car1 = new Car("Toyota", "Camry");
var car2 = new Car("Rolls Royce", "Phantom");

car1.honk();

The other main way of creating an object is to add it’s methods to the prototype.

function Car(make, model){
    this.make = make;
    this.model = model;
 }

 Car.prototype.honk = function(){
    alert("Honk from "+ make + " " + "model");
 };

The part where function attributes are declared make and model is the same, but the function(s) are added later to the prototype of the Car

These are all public methods and attributes of the Car object.

How can we make a method or an attribute private in Javascript?

Private methods and variables are created in the constructor. Any variable declared with var is private, and any function declared with the function <function_name is private too.

function Car(make, model){
    var make = make;
    var model = model;

    function honk(){
        alert("Honk from "+ make + " " + "model");
    };
 }

In the above example make and mode variables are private, as is the honk() method, they cannot be accessed publicly even though they are attached to the object.

Private attributes and methods are accessible to functions declared with the this keyword. And example is provided below.

function Car(make, model){
    var make = make;
    var model = model;

    function honk(){
        alert("Honk from "+ make + " " + "model");
    };

    this.honkAndTurn = function(){
        honk();
        alert("Honked "+make+" and turned");
    };
 }
Written on April 4, 2016