Traditional languages have chosen to implement OOP using classical inheritance. This form of inheritance is based on classes, which describe the relationship of data and accompanying methods in a parent-child organization. Classes describe the relationship between objects of a certain type while objects are the runtime instantiation of a particular class. Classes are therefore organized hierarchically.
OOP in Javascript, however, is based on prototypal inheritance. In prototypal inheritance relationships are between objects rather than classes and is based on reusing objects rather than on static class definitions.
At this point you might be thinking "But what about the class implementation in ES6?". This is a good question, but the class in ES6 is merely a syntactic wrapper around prototypal inheritance. Furthermore, the implementation of class in ES6 is a leaky abstraction. A leaky abstraction is like a six foot person trying to cover up with a five foot long blanket - something is going to stick out. This means that understanding Javascripts' prototypal inheritance is time well spent.
##ContributingThis is an "open source" reference and as such your contributions are welcomed and encouraged. The guidelines for contributing are:
- Follow the format used for the first recipe. Don't post just code - include your pros, cons, and your observations about the implementation. It's okay to make qualitative in addition to quantitative observations.
- Tailor the code snippet in the first recipe for any new recipes. This will maintain consistency and more importantly, will make it easier to compare and contrast competing recipes.
- Test your code before posting and include a link to the source in the Commentary section of the recipe.
- Be nice and keep it professional!
'use strict'
// ES6 class constructor style
// https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes
class LastYear {
greetMore(){
console.log("hello "+this.x+"!");
}
}
class NewYear extends LastYear {
constructor(x,y){
super();
this.x = x;
this.y = y;
}
greet(){
console.log("yo "+this.y +"!");
}
}
var newYear = new NewYear("John","Jane");
//////////////////////
// Classless OOP same as above, without classes
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
function Last_year(){
// code
}
Last_year.prototype.greetMore = function(){
console.log("hello "+this.x+"!!")
}
function New_year(x,y){
this.x = x;
this.y = y;
}
New_year.prototype = Object.create( Last_year.prototype );
New_year.prototype.greet = function(){
console.log("yo "+this.y+"!!");
}
var newYear2 = new New_year("John","Jane");
/////////////////////
// Kyle Simpson Object Linking Other Objects(OLOO) style
// https://github.com/getify/You-Dont-Know-JS/tree/master/this%20%26%20object%20prototypes
// chapter 4 and 5
var LastYear1 = {
greetMore: function(){
console.log("hello "+this.x)
},
};
var NewYear1 = Object.create( LastYear1 );
NewYear1.x = "John";
NewYear1.y = "Jane";
NewYear1.greet = function(){
console.log("yo "+this.y);
}
/////
// ES6 class
newYear.greetMore();
newYear.greet();
// OOP without classes
newYear2.greetMore();
newYear2.greet();
// OLOO programming
NewYear1.greetMore();
NewYear1.greet();| Pros | Cons |
|---|---|
| Clear and concise code | In ES6 Class is a leaky abstraction which uses ES5-style prototypal inheritance |