Hello and welcome to techsith tutorials today we are going to learn about a very
important method in JavaScript called object.create(). object.create makes
the prototype inheritance possible in JavaScript and this tutorial is part of a much
larger series on object oriented programming, so if you haven't started
from the beginning you can do so by clicking on a link here I'll provided
here. Every object in JavaScript is created from this master object and the
name of this object is Object and it it has a capital 'O' as you can see so
whenever I say object with capital 'O' which means I'm referring to this master
constructor. if I want to look at, it what it is it's in a global space so I
can use it directly and I can just simply say console.dir(). so dir would help
me look at this object master object in detail . I would see a function as I said
it's a constructor which is a function and if I expand it, I would see a bunch
of methods. object has one of the methods which is 'create' so this is what we're going to
look at. It also has other methods that you can use on it but today
we are going to simply talk about object.created. Let's look at the syntax
of this method 'object.create()'. It would take two arguments, the first argument is
some sort of object prototype so it will be an object and the second argument is
some sort of property object. The second argument actually is optional so using
this let's create a new object . I'm going to call this object myObject.
Type 'const myObject.create()' I'm going to set using Object's prototype,
the master object's prototype. Remember, every constructor has a property
called prototype which holds bunch of methods. So, I'm going to use object's
prototype to create 'myObject' and if I examine it using console, I would
see object and again here's a reference
'__proto__', this is nothing but a its creator and which will point to
that 'Object.prototype' so if I look at it I would see all this methods and I
can verify if these are the exact methods that are in Object's prototype. if
I do, let's say 'console.dir(myObject)' and run both so the first one you see is 'myObject'
and it has a '__proto__' and which has bunch of methods. This is the Object
constructor, if I scroll down it also has 'prototype' and also has much bunch of methods.
constructor has property called 'isPrototypeOf' which are the same methods. so
basically it's the same pointer to the 'Object.prototype'. Remember when you
create an an object literal, we can say 'const myLiteral'. It's an empty literal
, this actually created using the 'object.create()' method internally so
we'll have its prototype set to Object's prototype and I can examine it. I
would see exactly the same prototype reference here. You don't always have
to set this reference, you can create object without the 'Object.prototype' you
can say 'const noProto'. I'm just going to call object's name and you can say
'Object.create()' and I'm just going to pass 'null' to it, which means don't set
any prototype. if I examine, it would see three objects,
myObject, myLiteral and noProto. You can see the first two have reference
to prototype and the third one has no properties at all. So it doesn't set the
reference to object prototype now one of the jobs are off
Victoria is to create objects right as we see we are using objects prototype
but what if I create a new constructor so let's create a constructor called car
so I'm just going to say Const car and it's nothing but a constructor they can
say anyone Society will say this dot color color now you can actually create
because as a constructor you can create cars from it so let's say if I create
car one you put a new car and I'm just going to pass the red color so this is
how I create a new car I can do the same thing with objects create Const car to
object dot create and I'm just going to use cars this cars
prototype the only difference is here in the first example I'm running the
constructor and the second one I'm not running the constructor so the
difference between two is it's not going to set the image of property that
constructor usually set by console.log app so the first car has color property
and the second car doesn't but again they are setting to setting the same the
reference for the prototype now besides creating objects the the main objective
of object or create method is to extend constructors
you know how in object-oriented programming languages you have a base
class which has some methods and you can create a subclass which would inherit
the base class methods so you would use something like a Class B extends Class A
and it would basically copy all the matters into Class B similarly here you
can extend one r1 constructor from another constructor so let's start with
a car constructor and I'm going to add a prototype a method to it so I can say
car dot prototype I'm going to create this method called get color which I get
color and inside a word to say return this dot color remember this is a new
es2015 syntax you don't have to say get color equal to function now let's create
a toy car so which will be another constructor so I'm just going to say
constant toy car equal to a function this one is an empty constructor it
doesn't have anything now what I want is Twihard to have all the cars properties
and methods so basically using the prototype inheritance I want to set toy
cards proto to be cars proto and you can do it using the object on create method
so the way you would do it is a toy car dot prototype equal to and here I would
pass car dot so basically this over a different set of reference for the toy
cars proto two cars proto so let's say if I create a an object using this toy
car constructor so I can say Lego car equal to new toy car and if I look at
this Lego car Lego car I should see the prototype reference so I look at the toy
car and expand it I would see the gate car get color matter which is coming
from the the car constructor there are a bunch of ways to verify if toy car is
extended from one matter is out to say lego car instance off this should be
this should give me true because is toy car is lego car
instance of toy car which is correct so if I run it I will get it true you can
also check if Lego car is instance of car so they both are true and that car
is actually created from object because it's inheriting objects the master
objects properties so you can also verify if lemak are an instance of the
master object if I run it all three are true
there's also another method call is prototype off toy car dot prototype
proto off lego car so this should give me true so if toys car prototype is
prototype of Lego car and that should be true
I'll get it true similarly is cars prototype is prototype of toy car that
should be true as well is objects prototype is prototype of Lego car that
is also true so in nutshell object dot create helps you extend constructor
compared to classical inheritance when you extend one class or another you
basically copy all the methods from the from the base class into subclass here
you just set a reference from subclass to the base class so it's a prototype
reference so you don't really copy anything in the next retort we aren't
going to look at prototype chain and I hope you learned something from this
tutorial and if you did please like subscribe and provide a constructive
comment thank you