5.10 Custom Objects

Hi folks, in this lesson we're going to carry on looking at objects, this time focusing on creating custom objects. Of course, any object literal that we create is technically a custom object. But I mean creating custom types of objects, that we might want to create instances of later. This is also known as object-oriented JavaScript. Let's look at a basic example, first of all. So let's say that we want to create a new type of object, which will be a Person object. So what we've defined here is a function expression. But it's a special type of function expression. It's a constructor function, because we'll be able to use it to create Person objects. Now you'll notice from the syntax that there is nothing special about the function. It's not a constructor function because we're telling JavaScript that it's a constructor function, but it will end up being a constructor function, due to how we use it. So that's why we've capitalized the first letter of the variable that the constructor function is stored in, Person. Because that's the only way to let other people know that if they want to use this Person function as a constructor function, it needs to have the new keyword in front of it. So the function will receive a parameter, and that parameter is the name parameter. And inside the function all we do is set a property of this to the name that gets passed in. So we're using the this object once again, and in this context the this object will point to instances created by the constructor function, rather than the constructor function itself. So this is slightly different than other times that we've used this previously in the course. So don't worry, we will be coming back and looking at the this object in a dedicated lesson, to go over all of these different types once again. But just remember that, when used with a constructor function, the this object will point to instances created with the constructor function, rather than the constructor function itself. So if we want to add a method that all instances of Person objects will inherit, we need to use the constructors prototype. So in this case we've added a new method called greet, and inside that method all we do is return a string that says, hi my name is. And then uses this.name to get the name from the Person instance. So once again, this, in the context of this example, refers to instances of the Person, not the Person constructor itself. So now every time we create a new Person object, it will have a name property, and it will inherit this greet method from the Person constructors prototype. And in this case, we've set the prototype just to an object literal. So now let's create a new instance of our Person type. So let's just log out the new instance of Person to the console. And we can see that it is an object of the type Person, and it has a name property, and the name is Fred. We can also invoke the greet method if we want. And now we see the log message from the greet method. So this is a very basic way to create custom objects which behave a little bit like classes in other languages. But it's important to remember that JavaScript uses prototypes instead of classes. JavaScript does have classes, and we'll be looking at those later in the course, but these are just syntactic sugar that make writing object-oriented JavaScript a little easier. Even classes still use the prototype internally. So instances of the Person will inherit the object prototype, because the Person's prototype object is just an object literal. As well as using the new keyword, we can also use a method of the object constructor called the create method, to create new instances of objects. So first of all, let's just take a look at the output in the browser, and then we'll come back and talk about why the output is what it is going to be. So we created a second instance of our Person object, but as you can see, when we use the greet method, which that person object did inherit correctly, it says that the object's name is undefined. And the reason it's undefined is because, even though we created a new instance using object.create, we weren't able to pass the name of the Person into the new object when we created it. We bypass the constructor. Luckily we can pass a second argument to object.create, and that allows us to specify which properties the object that we're creating should contain. And any attributes of those properties, such as whether they are writable, enumerable, or configurable. The second argument that we pass to the create method is an object literal. And inside that object literal, the properties that we add will become properties of the object that we're creating. So in this case we wanted to add a name property, so that is the property name that we used. When we specified the name property, we also added an object literal as the value of that property. This object literal is known as a property descriptor, and that allows us to specify different attributes of the property that we're creating. In this case we specified that the name property should be writeable, and we gave it a value of Bob. So let's just go back to the browser now, and we can see that that has fixed the undefined issue. As well as specifying whether the property should be writable, we can also specify whether it should show up in a loop, by setting the enumerable property. And whether the property can be deleted, by specifying the configurable property. Each of these properties has the default value of false, so if we'd like to enable them, we have to set them to true specifically. We don't have to specify these property descriptors for the object when create it, we can also add them later using other methods of the object constructor, such as defineProperty or defineProperties. The defineProperty method is used to add a single new property, and it takes three arguments. These arguments are the objects to add the new property to, the key for the property in string form, and a property descriptor object. So we use the defineProperty method of the object constructor and we passed it three arguments. The first argument is the object that we're defining the property for, which in this case is the object stored in the bob variable. The second argument is the name of the property, so we've added a property to the bob instance object called job. And the third argument is this property descriptor object, and you can see that we've given the job property the value Developer. And we've specified that this property should be writable, configurable, and innumerable. And we added a new log to the console, so let's just check the output now in the browser. And we can see that the instance object Bob does indeed have this new job property, and it is set to the value that we specified, Developer. The defineProperties method is used to add a number of different properties to an object at the same time. The defineProperties method takes a slightly different format than the defineProperty method did, so this time we pass two arguments to the method. The first argument is the object we'd like to define the properties for, and in this case we've used our bob instance object. And the second is an object literal, which contains a series of object descriptors. And the format is very similar to the descriptors that we used previously, although in this case we only set the value of the new properties. The properties that we're setting are specified using the keys of the descriptor objects, such as heights in centimeters, weight in kilograms. And now let's go back to the browser one more time, and we can see that our Bob instance object now has these new properties as well. So in this lesson we saw how to create objects of a custom type, and saw some more methods of the object constructor that we can make use of. Such as the defineProperty method, which allows us to define a new property for an object, and pass in a descriptor object. Which specifies whether or not the property that we're adding should be configurable, or writable, or enumerable. And we also looked at the very similar defineProperties method, which is used to define multiple properties at the same time. In the next lesson we're going to move on to look at the Math API. Thanks for watching.