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

@Andy E: Six not accepted questions within one week is not that bad. — Gumbo, Feb 08 '10 at 12:40
@Gumbo: Yes, but it starts out as 6 in one week and grows from that. I think it's best to prompt someone to mark some answers as early as possible :-) — Andy E, Feb 08 '10 at 12:56
@sasori: If any of the answers to your previous questions were satisfactory and/or solved your problem, you may want to mark them "accepted". This is considered good etiquette, and will encourage more users to answer any of your future questions. In any case, welcome to Stack Overflow. — Daniel Vassallo, Feb 08 '10 at 13:00
@sasori: Please read the FAQ (http://stackoverflow.com/faq). — Gumbo, Feb 08 '10 at 13:00

score 8 · Answer 1 · answered Feb 08 '10 at 12:09

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.

But you can still emulate aspects of class based inheritance and make it feel like regular classes. http://js-bits.blogspot.com/2010/08/javascript-inheritance-done-right.html — Ruan Mendes, Apr 22 '11 at 00:29

score 4 · Answer 2 · edited Feb 08 '17 at 14:13

4

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.

JavaScript: The good parts

edited Feb 08 '17 at 14:13

Community

1
1

answered Feb 08 '10 at 20:21

Mark Snidovich

1,055
7
11

Yes. There are also excellent explanations on Douglas Crockford's web site (www.crockford.com). – PeterAllenWebb Feb 08 '10 at 20:26
You might find the videos he's done useful, too - here are a couple. http://ajaxian.com/archives/douglas-crockford-video-advanced-javascript http://video.yahoo.com/watch/111593/1710507 – Mark Snidovich Feb 11 '10 at 19:10

score 3 · Answer 3 · answered Feb 08 '10 at 12:17

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));

Daniel Vassallo · Accepted Answer · 2010-02-08T13:59:54.763

2

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

edited Feb 08 '10 at 13:59

answered Feb 08 '10 at 12:16

Daniel Vassallo

337,827
72
505
443

1

Your example does not use prototype based inheritance at all. This is certainly a valid way to do inheritance, but don't claim that this is prototype based inheritance. – Keith Rousseau Feb 08 '10 at 13:56
1

@Keith: Updated my answer: with more accurate terminology... Nevertheless, I think the above can still be considered an example of a prototype-based programming: In prototype-based systems there are two methods of constructing new objects, through cloning of an existing object, and through ex nihilo ("from nothing") object creation. Source: http://en.wikipedia.org/wiki/Prototype-based_programming#Object_construction – Daniel Vassallo Feb 08 '10 at 14:02
@DanielVassallo Thank you for this example, makes it easy coming from Java :) – Petro Nov 04 '19 at 19:09

Greg · Answer 5 · 2010-02-08T12:38:37.977

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.

score 2 · Answer 6 · edited May 23 '17 at 12:01

2

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.

edited May 23 '17 at 12:01

Community

1
1

answered Feb 08 '10 at 13:23

bobince

528,062
107
651
834

score 1 · Answer 7 · answered Feb 08 '10 at 12:23

1

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 herefor understanding better

answered Feb 08 '10 at 12:23

Zimbabao

8,150
3
29
36

How do you define an OOP class in JavaScript?

7 Answers7

Linked