Js: master prototypes
Download as PPTX, PDF1 like685 views
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.
![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](https://image.slidesharecdn.com/ix9vdjghsakheu3inpq6-signature-f2e95e429c1afbe81e45170ea2b69ee19cb0f7a9ab97c90291e1773693f7b706-poli-161227204726/85/Js-master-prototypes-10-320.jpg)
![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.](https://image.slidesharecdn.com/ix9vdjghsakheu3inpq6-signature-f2e95e429c1afbe81e45170ea2b69ee19cb0f7a9ab97c90291e1773693f7b706-poli-161227204726/85/Js-master-prototypes-13-320.jpg)
![Fundamental JavaScript [UTC, March 2014]](https://cdn.slidesharecdn.com/ss_thumbnails/fundamentaljavascriptutcmarch2014-140305104047-phpapp01-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (20)
Similar to Js: master prototypes (20)
Ad
More from Barak Drechsler (8)
Ad
Recently uploaded (19)
Js: master prototypes
- 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?