Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

6.7 Prototypes

The prototype is a special object that has a huge significance for JavaScript inheritance. Prototypes are a powerful mechanism, and it is important to understand them well.

Syntax

  • __proto__
  • prototype

1.Introduction
2 lessons, 07:42

1.1
Introduction
02:12

1.2
Setup
05:30

2.Language Fundamentals
8 lessons, 1:00:53

2.1
Variables
06:33

2.2
Data Types
11:28

2.3
Arithmetic, Assignment, and Comparison Operators
10:24

2.4
Unary, Logical, Comma, and Spread Operators
09:02

2.5
Operator Precedence
03:50

2.6
Reserved Words
04:17

2.7
Strict Mode
04:34

2.8
Functions
10:45

3.Data Structures
5 lessons, 22:52

3.1
Arrays
04:29

3.2
Objects
04:30

3.3
Sets
04:57

3.4
Maps
04:21

3.5
Weak Maps and Weak Sets
04:35

4.Controlling Program Execution
7 lessons, 37:06

4.1
Conditionals
07:49

4.2
Switch Statements
04:41

4.3
The For Loop
06:39

4.4
The `for .. in` Loop
05:17

4.5
The `for .. of` Loop
04:02

4.6
Iterators
05:03

4.7
While Loops
03:35

5.Using JavaScript
13 lessons, 1:44:36

5.1
Working With Strings
09:32

5.2
Template Literals
05:46

5.3
Working With Numbers
06:57

5.4
Working With Arrays
12:53

5.5
Iterating and Transforming Arrays
07:33

5.6
Working With the Object Type
13:55

5.7
Object Literal Extensions
06:45

5.8
Working With Object Instances
06:45

5.9
Getters and Setters
05:00

5.10
Custom Objects
11:28

5.11
The `Math` API
04:54

5.12
Working With Dates and Times
08:10

5.13
The `Array` Constructor
04:58

6.Functions
8 lessons, 56:07

6.1
The `this` Object
06:15

6.2
Working With Functions
10:11

6.3
Scope
07:37

6.4
Arrow Functions
06:59

6.5
Generator Functions
08:13

6.6
Closures
05:00

6.7
Prototypes
06:26

6.8
Default and Rest Parameters
05:26

7.Miscellaneous
6 lessons, 52:39

7.1
Destructuring Assignments
08:09

7.2
AJAX
08:30

7.3
Regular Expressions
10:51

7.4
More About Regular Expressions
08:38

7.5
Classes
06:48

7.6
ES Modules
09:43

8.Working With the DOM
6 lessons, 37:39

8.1
Selecting HTML Elements
05:02

8.2
Manipulating HTML Elements
07:40

8.3
DOM Traversal
05:25

8.4
Adding and Removing Elements
04:45

8.5
Creating Elements and Other Nodes
04:39

8.6
DOM Events
10:08

9.Web APIs
4 lessons, 17:41

9.1
The Selector API
03:03

9.2
Geolocation
05:29

9.3
Web Storage
05:24

9.4
Web Workers
03:45

10.Asynchronous JavaScript
5 lessons, 26:23

10.1
Promises
09:52

10.2
Promise Chaining
05:11

10.3
The async Keyword
03:21

10.4
The await Keyword
04:04

10.5
More About async and await
03:55

11.Conclusion
1 lesson, 00:43

11.1
Conclusion
00:43


6.7 Prototypes

Hi folks. In this lesson we're going to take another quick look at prototypes in JavaScript. So remember the prototype is a special property that all objects have. This is the object that they are descended from and from which they inherit properties and methods. For example, when we create an object literal, even if we don't add any properties to it ourselves, it will still have certain properties and methods that we can make use of. In this example we call the has own property method on the empty object literal that we created and stored in the variable myobj. So this hasOwnProperty method came from the object literal's prototype, which is the prototype property of the object, so that's object with a capital O, constructor which is what created the object literal for us behind the scenes. So we don't actually need to look at the outputs of hasOwnProperty('key'). We know that our object literal doesn't have a property called key, so this method is gonna return false. We don't need to worry about that. But let's just log the object itself to the console. So there's our empty object literal in the console. Let's just open it up. So we didn't add any properties to this object literal ourselves, but as we can see, it still has this special __proto__ value. And that property is the prototype object of the object literal. And as we can see, that currently points to the object constructor. So this is the object from which our own object is descended. When we open up the __proto__ property, which from this point forward I'm just gonna refer to as proto, we can see that there are a bunch of other properties and methods. So we can see the constructor property. And that also points to the object constructor. And we can see the hasOwnProperty method, which we looked at just a moment ago and which we've used earlier in the course as well. So all of these properties and methods are what is being inherited via this __proto__ object. So this is very interesting, but we shouldn't actually use this proto object in our own code ever. It's awful for performance and it's actually deprecated but it is interesting to look at and it can sometimes be useful purely for debugging scenarios. So prototypes themselves may form chains, similar to how nested scopes form chains. When we access an identifier in one scope, if the identifier is not found, the JavaScript engine moves up to look in the parent scope and so on and so forth, all the way through the scope chain until it reaches the global scope. When we try to access a property or a method of an object a similar process occurs. If the property or method is not present directly on the objects that we tried to invoke it on the JavaScript engine will look in the current object's prototype and then the prototype of that object and so on and so forth right back to the object's, capital o, Object prototype. If the property or method is not found there the engine gives up and returns undefined. But you can see that prototype chains are very similar to scope chains conceptually. So let's see this in action with another example. So in this example we first create a new constructor function called Example. We then set the prototype of this constructor function to a new array instance which we can access by invoking the array constructor. We then create a new instance object using our Example constructor and lastly we just log this to the console. So let's go to the browser and take a look at the output this time. So again, we just see our empty Example object and let's open this one up. So we still see a __proto__ property and that points to an instance created by the array constructor. Let's expand this one. As we know, arrays have a length property. So our example object will also have this inherited length property. It won't have it directly but it can still reach it through the prototype chain. And there is also another __proto__ property. So let's open that one up. And here we can see all of the methods that arrays have access to. And that means that our instance will also have access to all of these methods even though it isn't actually an array. Right down at the bottom we can see that there's another __proto__ object, this time pointing to the object constructor. Lets open that up. And we can see all of the properties and methods that's get inherited from the object constructor. And there are no more __proto__ objects because ultimately everything in JavaScript comes from the object constructor. So what we've done there in the console is manually navigate the prototype chain. That is exactly what happens when we try to invoke a property or method on an object. The engine will navigate the prototype chain looking for that property or method and only if it doesn't find it once it gets up to the object constructor does it return undefined. So let's just do a simple test. And we can see that even though our custom object has the array prototype, because the array prototype itself can access the object prototype we can still make use of the method. We don't get any errors and the code doesn't blow up. So in this lesson we looked at the special _proto_ property that all objects and all objects' instances in JavaScript have access to. And we learned that this is primary mechanism for inheritance in JavaScript and it's how the JavaScript engine is able to navigate the prototype chain. In the next lesson, we can look at default parameters and rest parameters. Thanks for watching.

Back to the top
View on GitHub