Practical and conceptual overview of Javascript prototype paradigm, how to use prototypes, how do they work, and how do they differ from classes, and why there are no real classes in Javascript.

1. Prototypes
By Barak Drechsler

2. First things first…
objects it all about
objects

3. JS Objects
• JavaScript is designed on a simple object-based paradigm.
• An object is a collection of properties
• A property is an association between a name (or key) and a value.
• Objects can be linked to other objects, via prototypes

4. Creating Objects in JS
var x = new Object(); // with new operator
var x = {}; // object literal
var x = Object.create({}); // with object.create

5. JavaScript is prototype-
based with first-class
functions, making it a multi-
paradigm language,
supporting object-oriented,
imperative, and functional
programming styles.

6. Classes Inheritance
A class is like a blueprint — a description of the object to be created.
Classes inherit from classes and create subclass relationships: hierarchical class
taxonomies.

7. Prototypical Inheritance
Prototypal Inheritance: A prototype is a working object instance. Objects inherit
directly from other objects.

9. Prototypical Chain
The prototypical chain, is a chain that links between objects
When a JS is looking for an object property it looks up recursively through the
prototype chain up to Object.prototype, and if it can’t find the property it will return
undefined.

10. How can we see an object
prototype?
The prototype, which is marked in official documents [[Prototype]], not to be confused with
function.prototype.
Can be accessed via:
Object.getPrototypeOf(obj)
Or via nonstandard way that was self defined by the browsers (not in the ECMA spec)
__proto__ property

11. Prototypical Chain - basic

12. How To Define a prototype?
var x = new ConstructorFunc(); // constructor function and new operator.
var x = Object.create({}); // with object.create, given param is the prototype
var x = {};
// both operations below, should be avoided, they are very costly at
performance
x.__proto__ = {}; // not standard

13. The relation between
constructors and
prototypes...
Two very confusing terms in JS language
[[Prototype]] or __proto__ - the actual linkage to the prototype, and prototype
chain.
prototype - property of any function, defines the prototype of a new object that will
be initiated by this function with the new operator.

14. The New Operator
function _new() {
// Create a new object that inherits from the
// constructor's prototype.
var that = Object.create(this.prototype);
// Invoke the constructor, binding this- to
// the new object.
var other = this.apply(that, arguments);
// If its return value isn't an object,
// substitute the new object.
return (typeof other === 'object' && other) || that;
});

15. Basic Inheritance JS
ES5 Prototypes Inheritance
ES6 Prototypes Inheritance (syntactic sugar of classes )
JavaScript classes introduced in ECMAScript 6 are 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. (MDN)

17. Be aware of instanceof
function Agent(){}
var agentHijaker = {};
Agent.prototype = agentHijaker;
var fakeAgent = Object.create(agentHijaker);
fakeAgent instanceof Agent // true - wtf?

18. Problems with classical
inheritance
- Fragile
- Tight coupling
- Hard to change later
- Creates unneeded hierarchies

19. Other ways...
- Factory functions (rather than constructor functions)
- Concatenative inheritance via object compositions
- Functional Inheritance

20. Questions?