the prototype property prototypal inheritance

ux.mercadolibre.com

references JavaScript Enlightenment, Cody Lindley Principles of Object-Oriented Programming in JavaScript, Nicholas C. Zakas Programming JavaScript Applications, Eric Elliott Object-Oriented JavaScript, Stoyan Stefanov

Object Oriented JavaScript

JavaScript has one of the most flexible and expressive object systems available in any popular programming language.

All types of functions, arrays, key/value pairs, and data structures in general are really objects.

JavaScript handles classical inheritance with less code than most class-based languages.

Understanding how the prototype works is an important part of learning the JavaScript language.

table of contents

1. functions 2. constructor functions 3. this keyword 4. instances 5. prototype 6. own properties 7. prototype properties

functions

1. functions are objects 2. create scope 3. have in mind the most important methods of the functions objects

1. call() 2. apply()

4. the most important property of a function is the prototype property

constructor functions

1. it is the pattern that JavaScript uses for native constructor functions 2. the role is to create objects that share certain qualities and behaviours 3. think it as template or cookie cutter for producing pre-defined objects 4. begin with a capital letter to distinguish from regular functions 5. the benefit is they accept parameters, used when creating new objects 6. using the new operator, we want an instance of the constructor function 7. omitting the new operator may not behave as you could expect

this keyword

1. this keyword is an object that will be returned by the constructor 2. this object is automatically created by new keyword 3. we can leverage the object via this before the object is actually created 4. it will be an instance of the constructor’s type 5. without new, the value of this is equal to the global object

instances

1. the returned object from the constructor function is an instance of that 2. If there are 100 instances, there are 100 copies of the exact same thing 3. there’s no reason that each instance needs to have its own properties 4. it contains a reference to the constructor function used to create it 5. the instanceof operator

1. determine if an object is an instance of a constructor function 2. it will return true any time you ask if an object is an instance of Object 3. only works with complex objects and instances from constructor

functions

prototype or Flyweight Pattern

The intent of this pattern is to use sharing to support a large number of objects

that have part of their internal state in common where the other part of state can vary.

prototype

1. you should care about the prototype property for four reasons 1. it is the mechanism that JavaScript itself uses 2. user-defined constructor functions can use inheritance the same way

native objects do 3. someday you might have to edit or manage someone else’s code 4. you can create efficient object instances that all leverage the same

methods

prototype

1. every function has a prototype property used in creation of instances 2. makes it ideal for methods 3. all built-in objects have a prototype that you can change 4. it's important to note that the prototype is "live" 5. it allows to alter properties and methods of existing objects at any time 6. you cannot assign a value to a prototype property from an instance 7. isPrototypeOf() method is used as a prototype of another object 8. augmenting built-in objects is a very powerful technique 9. when overwrite the prototype reset the constructor property

prototypal inheritance

It was conceived to allow inheritance chains that mimic the inheritance patterns found in traditional object-oriented programming languages.

Inheritance is simply one object being given access to another object’s properties.

This is done by instantiating an instance of the object you want to inherit from as the value for the prototype property of the function that creates the

object that is doing the inheriting.

Hernán Mammana, @hmammana

Thanks