Written by Ryan Thelin, a contract technical writer for Educative.inc
We will cover the following:
- What is prototypical inheritance?
- Cons of prototypical inheritance
- Important terms
- Setting up prototypical relationships
- Inheriting methods
- Three-Tier Inheritance and Scalability
- Wrapping up and resources
Dateobjects inherit from
Arrayobjects inherit from
Playerobjects inherit from
Object.prototype is on top of the prototype inheritance chain.
Array objects, and
Player objects all inherit from
Image from dsinecos
Let’s walk through an example of prototypical inheritance you’re likely familiar with from grade school: all squares are rectangles, but not all rectangles are squares. If we think of this as a JS program, we could say that the rectangle is a prototype to the square: the square inherits all properties of a rectangle (i.e. four-sides and closed), while also adding a new feature (i.e. all sides are the same length).
We could not, however, construct this same concept using the square as a prototype, because there are properties of a square that do not apply to rectangles (i.e. all sides are the same length).
We can see how prototypal inheritance works on the basis of specifying categories within a group from least specific to most – from rectangle to square. In code, this concept can sometimes be lost in the syntax. If you find this happens, speak the relations between objects and listen to where you draw distinctions. If you hear, "all ___ are __, but...not all __ are___", that is where a new prototypical relationship should be added.
Inheritance cannot flow in circles as this will create an error. For example, if
premiumFamilyas a prototype in the above program, an error would occur as this would create a loop.
Objects cannot inherit from multiple prototypes. As we saw above, they can inherit multiple object's properties through a chain, however another object linked as a prototype explicitly will cause an error. This is the case even if the additional prototype is within the same chain. For example,
familyPremiumcould not have explicit links to both
Prototypical relationships can only be made to objects. This is because the
__proto__function works as a forwarder, directing the program where to find the value it is looking for. As the program either knows where to look or it doesn’t, the function can be only either
nullor an object. All other types will be discarded.
[[Prototype]]. We can access that
[[Prototype]] using the
Let’s take a look at the syntax for accessing and setting the
[[Prototype]] property of an object.
//using __proto__ to access and set the [[Prototype]] of "anObject" anObject.__proto__ = someotherObject
Object.create( ). This method can be used to replace
new. We can use it to create an empty object based on a defined prototype and then assign it to a different prototype. Take a look at the syntax:
Object.create methods can accept two arguments:
All objects have a constructor property. If an object is created without the using a constructor function, it will have a constructor property. The constructor property will return a reference to the object’s
Object constructor function. It will return
true1, and”test”`. Take a look at an example below.
hasOwnProperty, we can test if an object contains a certain prototype property; the method will return
false depending. This will help you clarify if an object has its own property or if it is inheriting instead. Take a look at the syntax below:
Prototypal inheritance uses the concept of prototype chaining. Let’s explore that concept. Every object created contains
[[Prototype]], which points either to another object or null. Envision an object C with a
[[Prototype]] property that points to object B. Object B’s
[[Prototype]] property points to prototype object A. This continues onward, forming a kind of chain called the prototype chain.
This concept is used when searching our code. When we need to find a property in an object, it is first searched for in the object, and if not found, it is searched for on that object’s prototype, and so on. Thus, the entire prototype chain is traversed until the property is found or
null is reached.
Want to learn more about Prototypal Chaining? Check out the course Learn Object-Oriented Programming in JavaSrcript
In the following sections, we'll take a look at some implementations using the handling of accounts in a streaming service.
For this first example, we'll write a simple prototypical relationship between two objects,
premiumUser, using the
._proto_ function. Each of these objects has their own properties which would be shared among all accounts at that tier: all
users have access to stream shows,
showAccess = true, and all
premiumUsers have advertisements disabled,
ads = false
The prototypical relationship here ensures that
premiumUser inherits the
showAccess property set from
user without having to set it manually at the premium tier. To check that this has inherited properly, we add a line to have the console print the current value of
premiumUser. As it returns
true, we can see that
premiumUser has inherited this property from
Prototypal Inheritance can be used not only to inherit properties from other objects but methods as well. In the example below, we build off our previous code and now add
IDnumber properties to user, tracking account info for this user, as well as a setter method,
accountInfo which when called will parse a passed string, setting
IDnumber to the new passed values.
The key section of this example is the calling of the three methods at the bottom. Each of these methods are defined under the
user object and therefore would usually be inaccessible by
premiumUser. However, because
user is the prototype of
premiumUser, all methods and properties of
user are shared with any inheritor objects.
From the final two methods, we also see how the value of the properties shared are not stagnant but can be set to new values regardless of the properties' values in the prototype.
As you might have noticed, the examples above allow for only one account in
user and one account in
premiumUser. To introduce much needed scalability, we pivot from using these objects as variables and instead use them as an equivalent to classes. Instead of changing properties' values, we create new objects for each account, setting the prototype for that new object based on the tier of the account.
In the example below, the object
me will be my account. This object then calls the inherited setter method to set values for the
IDnumber property exclusive to this account, and set its tier by making the newly added
familyPremium object as its prototype. While this is an example using a single account object, this procedure could be scaled to assign the correct properties to any number of objects.
Even with three levels of inheritance, we can see that
me has access to data throughout the chain, from the immediately inherited
multipleDevices property to the inherited
accountInfo method, defined at the top of its chain in
user. Regardless of how many levels the inheritance chain has, all information from previous levels are retained and accessible.
Through the use of prototypical inheritance, we're able to create a program in which new accounts can be added and assigned established properties in only a few lines of code rather than having to set manually. It also allows for ease of adaptability of those properties. If we could change properties of all inheritor accounts by only changing the properties in the prototype.
As a result, we get a program which is scalable, adaptable, and efficient in execution, all possible thanks to a prototype-based approach.
For example, AngularJS uses hierarchical
scopes for inheriting data values for data binding to display on web pages. A
Site scope object may define values for the
IconImg for a website, then individual
Page scope objects may use prototype links to allow sharing of those common data values. It also allows customization for individual web pages by overriding or augmenting the inherited values for certain pages.
Regardless of what syntax is used, whether it’s a streaming service or web page design, prototypical inheritance is a useful tool for all web application development projects.