What is OLOO?

OLOO just stands for objects-linked-to-other-objects.

It’s a style pattern which embraces delegation oriented design and the nature of JS in general. One of the thing I like most about OLOO is the fact we can completely get rid of the confusing new operator. No more need to use function as a constructor to create objects; Object.create() method will be our hero here.

Let’s have a look at how we can implement the same Student / Person relation using OLOO.

 

[code lang=”js”]
var Person = {
init: function(name) {
this.name = name;
},
getName: function() {
return this.name;
}
};

var Student = Object.create(Person);

Student.set = function(name, school) {
this.init(name);
this.school = school;
};

Student.getSchool = function() {
return this.school;
};

var giamir = Object.create(Student);
giamir.set(‘Giamir’, ‘TWU’);

giamir.getName(); // Giamir
giamir.getSchool(); // TWU

[/code]

And  here some examples too…

 

[code lang=”js”]
function Foo(who) {
this.me = who;
}

Foo.prototype.identify = function() {
return "I am " + this.me;
};

function Bar(who) {
Foo.call(this,"Bar:" + who);
}

Bar.prototype = Object.create(Foo.prototype);
Bar.prototype.constructor = Bar; // "fixes" the delegated `constructor` reference

Bar.prototype.speak = function() {
alert("Hello, " + this.identify() + ".");
};

var b1 = new Bar("b1");
var b2 = new Bar("b2");

b1.speak(); // alerts: "Hello, I am Bar:b1."
b2.speak(); // alerts: "Hello, I am Bar:b2."

// some type introspection
b1 instanceof Bar; // true
b2 instanceof Bar; // true
b1 instanceof Foo; // true
b2 instanceof Foo; // true
Bar.prototype instanceof Foo; // true
Bar.prototype.isPrototypeOf(b1); // true
Bar.prototype.isPrototypeOf(b2); // true
Foo.prototype.isPrototypeOf(b1); // true
Foo.prototype.isPrototypeOf(b2); // true
Foo.prototype.isPrototypeOf(Bar.prototype); // true
Object.getPrototypeOf(b1) === Bar.prototype; // true
Object.getPrototypeOf(b2) === Bar.prototype; // true
Object.getPrototypeOf(Bar.prototype) === Foo.prototype; // true
[/code]

And this…

[code lang=”js”]
var Foo = {
Foo: function(who) {
this.me = who;
return this;
},
identify: function() {
return "I am " + this.me;
}
};

var Bar = Object.create(Foo);

Bar.Bar = function(who) {
// "constructors" (aka "initializers") are now in the `[[Prototype]]` chain,
// so `this.Foo(..)` works easily w/o any problems of relative-polymorphism
// or .call(this,..) awkwardness of the implicit "mixin" pattern
this.Foo("Bar:" + who);
return this;
};

Bar.speak = function() {
alert("Hello, " + this.identify() + ".");
};

var b1 = Object.create(Bar).Bar("b1");
var b2 = Object.create(Bar).Bar("b2");

b1.speak(); // alerts: "Hello, I am Bar:b1."
b2.speak(); // alerts: "Hello, I am Bar:b2."

// some type introspection
Bar.isPrototypeOf(b1); // true
Bar.isPrototypeOf(b2); // true
Foo.isPrototypeOf(b1); // true
Foo.isPrototypeOf(b2); // true
Foo.isPrototypeOf(Bar); // true
Object.getPrototypeOf(b1) === Bar; // true
Object.getPrototypeOf(b2) === Bar; // true
Object.getPrototypeOf(Bar) === Foo; // true
[/code]

 

Give me moree

If you grasped the OLOO style pattern and you want to have a look at a slightly more complicated exemplar you can have a look at my Airport Challenge KATA solved using OLOO.

Airport Challenge KATA

 

https://github.com/giamir/airport_challenge_oloo

https://philipwalton.com/articles/implementing-private-and-protected-members-in-javascript/