- 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.Introduction2 lessons, 07:42
1.1Introduction02:12
1.2Setup05:30
2.Language Fundamentals8 lessons, 1:00:53
2.1Variables06:33
2.2Data Types11:28
2.3Arithmetic, Assignment, and Comparison Operators10:24
2.4Unary, Logical, Comma, and Spread Operators09:02
2.5Operator Precedence03:50
2.6Reserved Words04:17
2.7Strict Mode04:34
2.8Functions10:45
3.Data Structures5 lessons, 22:52
3.1Arrays04:29
3.2Objects04:30
3.3Sets04:57
3.4Maps04:21
3.5Weak Maps and Weak Sets04:35
4.Controlling Program Execution7 lessons, 37:06
4.1Conditionals07:49
4.2Switch Statements04:41
4.3The For Loop06:39
4.4The `for .. in` Loop05:17
4.5The `for .. of` Loop04:02
4.6Iterators05:03
4.7While Loops03:35
5.Using JavaScript13 lessons, 1:44:36
5.1Working With Strings09:32
5.2Template Literals05:46
5.3Working With Numbers06:57
5.4Working With Arrays12:53
5.5Iterating and Transforming Arrays07:33
5.6Working With the Object Type13:55
5.7Object Literal Extensions06:45
5.8Working With Object Instances06:45
5.9Getters and Setters05:00
5.10Custom Objects11:28
5.11The `Math` API04:54
5.12Working With Dates and Times08:10
5.13The `Array` Constructor04:58
6.Functions8 lessons, 56:07
6.1The `this` Object06:15
6.2Working With Functions10:11
6.3Scope07:37
6.4Arrow Functions06:59
6.5Generator Functions08:13
6.6Closures05:00
6.7Prototypes06:26
6.8Default and Rest Parameters05:26
7.Miscellaneous6 lessons, 52:39
7.1Destructuring Assignments08:09
7.2AJAX08:30
7.3Regular Expressions10:51
7.4More About Regular Expressions08:38
7.5Classes06:48
7.6ES Modules09:43
8.Working With the DOM6 lessons, 37:39
8.1Selecting HTML Elements05:02
8.2Manipulating HTML Elements07:40
8.3DOM Traversal05:25
8.4Adding and Removing Elements04:45
8.5Creating Elements and Other Nodes04:39
8.6DOM Events10:08
9.Web APIs4 lessons, 17:41
9.1The Selector API03:03
9.2Geolocation05:29
9.3Web Storage05:24
9.4Web Workers03:45
10.Asynchronous JavaScript5 lessons, 26:23
10.1Promises09:52
10.2Promise Chaining05:11
10.3The async Keyword03:21
10.4The await Keyword04:04
10.5More About async and await03:55
11.Conclusion1 lesson, 00:43
11.1Conclusion00: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.