Péter Schmíz
Deputy CEO / CTO @ WTT Budapest
Prototype, differences, compare with ES6 class, inheritance and object oriented design patterns in Javascript
In object-oriented programming, inheritance is when an object or class is based on another object (prototypal inheritance) or class (class-based inheritance), using the same implementation.
Prototype
What is prototype?
Every JavaScript function has a prototype property (this property is empty by default), and you attach properties and methods on this prototype property when you want to implement inheritance.
This prototype property is not enumerable.
The prototype property is used primarily for inheritance; you add methods and properties on a function's prototype property to make those methods and properties available to instances of that function.
Prototypical inheritance is like you loosing your pen in a class, then you first ask your friends if they have an extra, if they don't, then you ask your 'non-friends', before you then ask your enemies. :)
Youtube comment
When it comes to inheritance, JavaScript only has one construct: objects. Each object has a private property (referred to as [[Prototype]] ) which holds a link to another object called its prototype.
That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. By definition, null has no prototype, and acts as the final link in this prototype chain.
Nearly all objects in JavaScript are instances of Object which sits on the top of a prototype chain.
__proto__
???
Following the ECMAScript standard, the notation someObject.[[Prototype]] is used to designate the prototype of someObject.
Since ECMAScript 2015, the [[Prototype]] is accessed using the accessors Object.getPrototypeOf() and Object.setPrototypeOf(). This is equivalent to the JavaScript property __proto__ which is non-standard but de-facto implemented by many browsers.
How to create prototypes?
ES6 Classes
JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript's existing prototype-based inheritance.
The class syntax is not introducing a new object-oriented inheritance model to JavaScript. JavaScript classes provide a much simpler and clearer syntax to create objects and deal with inheritance.
"special functions"
Multiple inheritance in Javascript
JavaScript design patterns
Constructor Pattern
Module Pattern
Revealing Module Pattern
Singleton Pattern
Observer Pattern
Mediator Pattern
Prototype Pattern
Command Pattern
Facade Pattern
Factory Pattern
Mixin Pattern
Decorator Pattern
Flyweight Pattern
Thanks!
Prototype, differences, compare with ES6 Class, inheritance, OO design patterns - part 1
By Péter Schmíz
