Prototype Delegation with JavaScript's new Keyword
When the new keyword is used in JavaScript, a new object is created, the this context is directed to the the new object and the new object is prototype linked. In this lesson we'll create a function and call it with the new keyword. We'll then modify this function's prototype object and show it's relationship with the newly created object.
Instructor: [00:00] In traditional class-oriented languages, constructors are special methods that are attached to classes. These special methods are invoked when a new keyword is called on the class.
[00:11] JavaScript has a new operator, and the code looks basically identical to what you see in those class-oriented languages. Because of this, it might be easy to think that JavaScript is doing something similar.
[00:22] However, it's completely different. Pretty much any function can be called with new in front of it. Let's go ahead and use the new keyword on our Car function, passing in a string of "Ford." We'll console.log(MyCar).
[00:35] When the new keyword is used on a function, there are three things that will happen. The first is a brand-new object is created out of thin air. Either a newly-constructed object or an alternative object returned by the function that was called on.
[00:48] The second thing, it is prototype link. The third is the constructed object is set as this binding for that function call.
[00:57] As you can see, this is now directed to the MyCar instance. Our newly created object is now prototype linked to the Car's prototype object. Prototype objects are created when functions are declared.
[01:13] As we can see, this object does not have any properties on it. Our MyCar object is linked to an empty object. However, we can easily add properties to this object.
[01:24] Now, we can see that our prototype object has a property of wheels and a value of four. Let's go ahead and add another property into our prototype object called color with a value of black. We'll access color on our MyCar object.
[01:38] Now, if we console.log our MyCar object, we can see that it does not have a property called color on it. We're only able to access this color property because the prototype object is linked to our instance MyCar.
[01:52] The prototype chain is only searched when the property does not exist already on the object. When we call new on the Car function, we're telling it to assign properties of wheels and make onto the newly created object.
[02:05] When we look up wheels in our new object, it will find wheels on the new Car instance and won't continue to search the prototype chain.
[02:13] That's why we are getting one instead of four as a return. Using this on the Car function might make you think that our new instance of Car, MyCar is referencing the car function itself.
[02:26] If we give our car function a property of wheels of five, the MyCar instance wheels is still one. That's because it's going off of this here.
[02:35] To recap this, the new keyword can be used on almost any function. When it is used on a function, it's got a constructor call. These functions are usually capitalized.
[02:44] When it is used, a new object is created out of thin air. It's prototype linked to the prototype object of the function, and the context is directed to the newly created object.
[02:57] Another example is working with literal and constructed forms in JavaScript. The literal form is almost always preferred, but it has the same output when the constructed form is used.
[03:09] As we can see, the output between the literal and constructed forms are the same.