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

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

5.8 Working With Object Instances

All object instances inherit properties and methods from the prototype of their constructor. We can find out whether a property is defined on an object directly or inherited from the prototype. To do this, we use the hasOwnProperty method of the Object constructor. We’ll cover this and some other Object constructor methods in this lesson.

Syntax

  • constructor
  • hasOwnProperty
  • propertyIsEnumerable
  • toString

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


5.8 Working With Object Instances

Hi, folks. In this lesson, we're going to see some of the properties and methods we have at our disposal when working with object instances. Because objects are extensible, we can add any properties or methods to them that we want. But even if we create a brand new object literal, it will still inherit properties and methods from the object constructor. This is what we’ll be looking at in this lesson. So first off, let’s create a brand new empty object. First of all, let’s take a look at the constructor property. This property tells us the constructive function that created the object. And let's review the output in a browser. So we can see here that the constructor that created our object literal was actually the object with a capital O constructor. Other things, like arrays, strings and numbers, also have a constructor property which shows the constructor that created them. When writing object oriented JavaScript, we'll often make use of this property to specify the constructor function for a custom object. But in simpler situations, we often don't need to use it at all. The constructor property is a property of object instances. One instance method that all objects inherit, and which we saw briefly earlier in the course, is the hasOwnProperty method. Which we can use to check whether an object contains a property as a defined OwnProperty and not one that it inherits from its prototype. Let's just look at another basic example of this method in action. We already know that our object instance will inherit a constructor property, as we saw in the previous example. So let's test for that. And as we can see, the constructor property is not a defined owned property of the object literal. It's a property that is inherited from the object constructor. The hasOwnProperty method will also return false for any property that the object does not have directly defined on it. For example, In this case, the method reports false again, even though it doesn't have any property called random property. It doesn't have it defined, and it doesn't inherit it. But the code doesn't blow up the browser, it just reports false. Now let's add this new property to the object instance. And if we go back to the browser now, we can see that the second log statement is true, because the object does now have an own property called random property. Another method we can use is property is innumerable, which tells us whether the property will be iterated if the object is used with a for loop. So let's test the constructor property, first of all, and see whether that property is innumerable. And we can see that it reports false. And what that means is that the constructor property will never be shown when we iterate through the properties of myObject using something like a for in loop. Let's now test our own random property that we added to the object literal. For this property, it reports true. So the random property will be picked up if we use a for in loop on myObject. By default, when we add properties to an object literal, they are automatically innumerable. Another method which all objects inherit is the toString method, which returns a string representation of the object. And we can see that we see objects followed by Objects with a capital O. And what this means is that we're working with an object literal which was ultimately created by the capital O Object's constructor. So remember way back in the course when we looked at the types of unary operators right back in section two and we saw that if we use Typeof with an array, it actually reports objects. And I said that there is a better way to determine if we were working with an actual array as opposed to a generic object. These toString method is how we can do that. Let's see a basic example. This time we can see the toString representation of an array literal is object, because ultimately an array is a type of object. But the second item is an Array with a capital A. Because Arrays, all Arrays, even Array literals, are ultimately constructed by the Array Constructor. So we've invoked the toString method in a slightly different way than we've invoked some of the other instance methods that we've looked at in this section. And we've evoked the method by the prototype and using the call method. The reason why we've had to do it this way is because if we call the toString method on an array directly, the method will return all of the items within the array joined together. So in this case, it's an empty array and there are no items to join, so it will just return an empty string unless we go via the object prototype, as we have done in this case. So in this lesson, we looked at some of the different things that we inherit automatically with any object instances that we're working with. We looked at the constructor property, which shows us the constructor that created the objects, and the hasOwnProperty, propertyIsEnumerable, and toString methods. Including a useful way to check whether an object that were working with is really an array. In the next lesson, we’re going to look at getters and setters in objects. Thanks for watching.

Back to the top
View on GitHub