Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Prototypes
By Barak Drechsler
First things first…
objects it all about
objects
JS Objects
• JavaScript is designed on a simple object-based paradigm.
• An object is a collection of properties
• A prope...
Creating Objects in JS
var x = new Object(); // with new operator
var x = {}; // object literal
var x = Object.create({});...
JavaScript is prototype-
based with first-class
functions, making it a multi-
paradigm language,
supporting object-oriente...
Classes Inheritance
A class is like a blueprint — a description of the object to be created.
Classes inherit from classes ...
Prototypical Inheritance
Prototypal Inheritance: A prototype is a working object instance. Objects inherit
directly from o...
Prototypical Chain
The prototypical chain, is a chain that links between objects
When a JS is looking for an object proper...
How can we see an object
prototype?
The prototype, which is marked in official documents [[Prototype]], not to be confused...
Prototypical Chain - basic
How To Define a prototype?
var x = new ConstructorFunc(); // constructor function and new operator.
var x = Object.create(...
The relation between
constructors and
prototypes...
Two very confusing terms in JS language
[[Prototype]] or __proto__ - t...
The New Operator
function _new() {
// Create a new object that inherits from the
// constructor's prototype.
var that = Ob...
Basic Inheritance JS
ES5 Prototypes Inheritance
ES6 Prototypes Inheritance (syntactic sugar of classes )
JavaScript classe...
Be aware of instanceof
function Agent(){}
var agentHijaker = {};
Agent.prototype = agentHijaker;
var fakeAgent = Object.cr...
Problems with classical
inheritance
- Fragile
- Tight coupling
- Hard to change later
- Creates unneeded hierarchies
Other ways...
- Factory functions (rather than constructor functions)
- Concatenative inheritance via object compositions
...
Questions?
Js: master prototypes
Js: master prototypes
Upcoming SlideShare
Loading in …5
×

Js: master prototypes

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.

  • Login to see the comments

Js: master prototypes

  1. 1. Prototypes By Barak Drechsler
  2. 2. First things first… objects it all about objects
  3. 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. 4. Creating Objects in JS var x = new Object(); // with new operator var x = {}; // object literal var x = Object.create({}); // with object.create
  5. 5. JavaScript is prototype- based with first-class functions, making it a multi- paradigm language, supporting object-oriented, imperative, and functional programming styles.
  6. 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. 7. Prototypical Inheritance Prototypal Inheritance: A prototype is a working object instance. Objects inherit directly from other objects.
  8. 8. 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.
  9. 9. 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
  10. 10. Prototypical Chain - basic
  11. 11. 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
  12. 12. 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.
  13. 13. 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; });
  14. 14. 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)
  15. 15. Be aware of instanceof function Agent(){} var agentHijaker = {}; Agent.prototype = agentHijaker; var fakeAgent = Object.create(agentHijaker); fakeAgent instanceof Agent // true - wtf?
  16. 16. Problems with classical inheritance - Fragile - Tight coupling - Hard to change later - Creates unneeded hierarchies
  17. 17. Other ways... - Factory functions (rather than constructor functions) - Concatenative inheritance via object compositions - Functional Inheritance
  18. 18. Questions?

×