How do you define an OOP class in JavaScript?

Question

Based on my observation, the book that I am reading about JavaScript states that there's an OOP with JavaScript? It doesn't tell much about it, I mean it wasn't explained how to define a class. Can someone give me a sample snippet?

Thanks

Answer 1

JavaScript is Prototype based and not class based.

Prototype-based programming is a style of object-oriented programming in which classes are not present, and behavior reuse (known as inheritance in class-based languages) is performed via a process of cloning existing objects that serve as prototypes. This model can also be known as class-less, prototype-oriented or instance-based programming. Delegation is the language feature that supports prototype-based programming.

Answer 2

I recommend this book for a concise, precise explanation of both how to use JS's prototypal inheritance as well as how to emulate classical OO inheritance in JS.

Answer 3

Any function in javascript can be used to create an object:

Example:

function MyPoint(x, y) {
    this.x = x;
    this.y = y;
    this.distanceTo = getDistance;
}

function getDistance(p) {
  var dx = this.x-p.x;
  var dy = this.y-p.y;
  return Math.sqrt(dx*dx + dy*dy);
}

var p0 = new MyPoint(1, 2);
var p1 = new MyPoint(2, 3);

window.alert('The distance is ' + p0.distanceTo(p1));

Answer 4

The following snippet may help you getting started with JavaScript's class-less, instance-based objects:

function getArea() {  
   return (this.radius * this.radius * 3.14);  
}  

function getCircumference() {  
   var diameter = this.radius * 2;  
   var circumference = diameter * 3.14;  
   return circumference;  
}

function Circle(radius) {  
   this.radius = radius;  
   this.getArea = getArea;  
   this.getCircumference = getCircumference;  
}

var bigCircle = new Circle(100);  
var smallCircle = new Circle(2);

alert(bigCircle.getArea());            // displays 31400  
alert(bigCircle.getCircumference());   // displays 618  
alert(smallCircle.getArea());          // displays 12.56  
alert(smallCircle.getCircumference()); // displays 12.56

Example from: SitePoint - JavaScript Object-Oriented Programming

Answer 5

Here are couple different ways

if (typeof FFX == "undefined") {
    FFX = {};
}

//Static class
FFX.Util = ({
     return {
      method:function(){
      }
})();

FFX.Util.method(); 



//Instance class
FFX.Util2 = ({
    // private method
    var methodA=function(){
      alert("Hello");
    };
     return {
      method:function(){
      //Call private method
        methodA();
      }
});
var x= new FFX.Util();
x.method(); 

Another way

function MyClass(){
}

/* privileged functions */
MyClass.prototype.hello = function(){
    alert("Hello");
}   

Also you could see how jquery, prototype and alike handle classes and see if thats fits you needs.

Answer 6

There is no one standard way of doing OOP in JavaScript. Everyone uses slightly different class/instance systems and most books fudge the issue. See this question for discussion of ways to work with OO in JS and pick your favourite.

Answer 7

In JavaScript everything is a object. So even a function is a object. So in js (less then < version 2), function makes classes (which are first class objects themselves). Go here , here and here for understanding better