Class Based vs Prototype Based OOP Styles

In object oriented programming (OOP) languages the object orientation style may differ. Perhaps the most popular object oriented programming style is class based. JavaScript uses a prototypal object oriented programming style. In class based systems, an object is described by behaviors and attributes inside a class definition. In prototype based systems, an object is created like how desired objects of that type are to look. Then the JavaScript engine is instructed to create more objects that look like it.

Example 1. Class based objects.

1
2
3
4
5
6
7
8
public class Sensai {
  public String rank = "10th dan";
  public String style = "Uechi Ryu";
  public int age = 94;
  public String name = "Maruchan Daimondo";
}            

Sensai sensai = new Sensai();

Example 2. Prototype based objects.

1
2
3
4
5
6
7
8
var proto = {
  rank: "10th dan",
  style: "Uechi Ryu",
  age: 94,
  name: 'Maruchan Daimondo'
}      

var sensai = Object.create(proto);

In class based systems a class must defined with a constructor and objects of that class must be instantiated, whereas in prototype based systems, the object is defined in place.

Like class based systems, prototype based systems support multiple objects that share similar attributes.

Example 3. Class based object creation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Class definition
public class Sensai {
  public String school = 'Karate';
  public String style;
  public String name;

  // Constructor definition
  public Sensai (String style, String name){
    this.style = style;
    this.name = name;
  }

  // Object instantiation
  Sensai sensaiIchi = new Sensai('Uechi Ryu', 'Maruchan Daimondo');
  Sensai sensaiNi = new Sensai('Goju Ryu', 'Honda Toshihiro');
}

Example 4. Prototype based object creation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Prototype definition
var proto = {
  school: 'Karate'
}

// Constructor definition
var Sensai = function(style, name){
  this.style = style;
  this.name = name;
};

// Link constructor to prototype
Sensai.prototype = proto;

// Object instantiation
var sensaiIchi = new Sensai('Uechi Ryu', 'Maruchan Daimondo');
var sensaiNi = new Sensai('Goju Ryu', 'Honda Toshihiro');  

Sensai sensai = new Sensai();

In each approach above, an object template is defined. The template is a ‘class’ and ‘prototype object’ in class and prototype systems, respectively. Each serve the purpose of providing a framework from which objects will be instantiated.

Next, a constructor is defined. In class based systems, the constructor is defined inside the class itself, while in JavaScript, the constructor is actually outside of the prototype. Thus, an additional step is required to link the prototype to the constructor.

Lastly, the objects are instantiated!

These days, JavaScript offers the new operator, which is a departure from its prototype based roots. This is an attempt to make JavaScript more friendly to programmers familiar with class based systems. An alternative to new, and a more prototype based approach is the Object.create method.

Example 5. Using Object.create.

1
2
3
4
5
6
7
8
9
10
11
var proto = {
  school: 'Karate'
};

var sensaiIchi = Object.create(proto);
sensai.name = 'Maruchan Daimondo';
sensai.style = 'Uechi Ryu';

var sensaiNi = Object.create(proto);
sensai.name = 'Honda Toshihiro';
sensai.style = 'Goju Ryu';

Object.create receives as an argument, the prototype and returns an object. Via this strategy, common attributes of many object instances may be defined in the prototype. Note above that having to set the name and style manually with this strategy can quickly become burdensome. Another approach is to use a factory function.

Example 5. Using Object.create with a factory function.

1
2
3
4
5
6
7
8
9
10
11
12
var proto = {
  school: 'Karate'
}

var makeSensai = function(name, style) {
  var sensai = Object.create(proto);
  sensai.name = name;
  sensai.style = style;
  return sensai;
}
var sensaiIchi = makeSensai('Maruchan Daimondo', 'Uechi Ryu');
var sensaiNi = makeSensai('Honda Toshihiro', 'Goju Ryu');

There are several strategies for object creation in Javascript, but the general consensus is that Object.create is the preferred means.