 Hi, Abhishek here. So JavaScript is all about objects. I'll start with a few fundamentals. The first thing is the object itself. But are there any non-object things in JavaScript? The answer is yes. There are five types actually that are not objects and then there is the object. So the difference between these five types, number, string, Boolean, undefined, and object is that these are not mutable. And by not mutable, it means that you cannot change their properties. Once memory is allocated for them, that's when they're created, you can make almost no change. Objects are mutable. So that's the only difference. This is again a very basic thing of the object notation. So the first one, obj1 is the object in the literal notation. Second one is when we create it through the object constructor. The third one is the function. Function is also an object. This is how we retrieve a value in the object. Because object is a collection of properties, so to get to those properties, we should have an expression within those big brackets. And if it's a legal JavaScript name, not a reserve word, we can use the dot notation as well. If we use a foreign loop, we can loop through all the properties in the object and there is a built-in method called hasOnProperty that will get you to the properties of the object that are not inherited. Foreign will get you properties that are functions as well and delete will remove a property. So the not readable part of this is from the ES5 specification, which actually tells what properties are like. So you don't need to read all that. The point is that there are several properties in the objects that we as programmers or for the operators, they are not available. Several are such that are implemented differently across environments, across dollars. And there are some that are very useful but not a part of the standard. So what we mostly deal with is actually named data property. There are some name accessible properties also, so you can define properties that are like getters and setters. So you object dot property and the function is involved. A very special kind of object is a function. A function as there are so many properties, internal properties. A function has internal properties that hold the function's code. The function is created with the function keyword. There was a property over there, internal property called class. So for function objects the value of class is function and the code may not necessarily be in JavaScript. The invocation that happens with the parenthesis and whenever a function is created, the function's prototype property is set. So prototype property is different from the function's prototype. So I'll be coming to that. All objects have a prototype, internal property. And the prototype we are talking about here is an externally visible property called prototype. So there's a bit of confusion in naming. I'll clarify that in further slides. There's a thing called, there's a property called constructor that we have for all objects, the function as well as objects. And in the special case of function objects, the constructor for the prototype of the function is the function itself. So that's what is the last slide. So I'll be detailing constructors as well. This is a bit from directly copied from the spec. This is what happens when we are creating the function. So like I said, every object has an internal prototype property. That's the within brackets prototype in the third line. We have an operator, a function actually called proto with underscores on both sides. That is available to us in Mozilla and Chrome and Node. So that's a non-standard property. That's not a part of the specification. So you cannot use it in any production code. So the point of that property is that for an object it will give you the prototype internal property's value. You can also set the prototype internal property's value, although that is also non-standard. The point I'm trying to make here is that the prototype linkage or internal property of any function, that capital F over there is the function I created in one of the previous ones. So that is equal to this function, this function's prototype. So this function with a capitalized function is a built-in constructor that is used for creating functions. Length and prototype property we can see later. So this is again a very silly example to demonstrate that function is an object. Therefore it can be treated very much like an object and passed around as function arguments. So the example here is there is a chopper object. It has a fly property. That fly property is actually a function. So when we do a chopper.fly, it should do something to fly. And it accepts how to fly as the argument. Now how to fly is being invoked as a function. So we can pass in a function and set how the chopper should fly. So in those two things I have decided like how the flying should be done by passing the two new functions. These functions don't have names, they are called anonymous functions. So those functions are passed into that fly property and there it is invoked. So that's how this thing is working. There are various ways to invoke a function. The most popular is as a method. So when it is associated as an object's property and then the parenthesis operator is used, then the method, the function is invoked. So when it is invoked this way, this inside the function is set to the object of which this function is a method. This is a variable, it's available to all functions inside the function code. So when the function is invoked as a method, this is equal to the object. When the function is not invoked as a method, next slide, this will be the global object. Now this binding of this will happen only at the invocation time. So at the last moment we can switch things. This is the other thing where the function is invoked globally without an object. And in this case, this is bound to the global object. The global object comes from the environment. So if we go to the environment and try doing this, we get a rather big object. So this is the global object of my node REPL, I'm running. In browsers, this global object may be something else. So that was the thing. This is an important invocation where the function is invoked with the new operator. When the function is invoked with the new operator, it behaves as a constructor. So whatever code is there in the function that is executed as though it was the method of a new object. And the new object is created before that invocation. So it generates a new object that's the main point here. There's one more style of invoking functions where we call the apply method on the function itself. And we pass the object right here. We pass the objects and the parameters as arguments to apply. So we have the function defined over there, object here. And we do an apply to invoke that foo function. So that's an equivalent of obj. Whenever we execute invoke a function within the code, just like there is a this object, there's an arguments, objects as well available. So arguments holds a list of arguments that are passed to the function. So while declaring the function, you don't really need to be hard and fast about what is going in the parameter list, how many parameters are there. So as many parameters are passed, it will take them and assign them to this argument subject. So if you are expecting a variable number of arguments, maybe this will be useful. So the scope in JavaScript is function scope and not block scope. So block scope is in languages like C where a variable defined within a block is available only within that block and it is not in general visible outside the block. Here is the function. So a variable that is defined within a function is visible throughout that function but not outside. So that enables us to make use of closure. Actually when function is defined through an expression, what it returns actually is a closure. A closure is a structure where closure is the object that holds the environment of a function. So say if we have, let me see if I have an example. I have an example so I will show it through the example. So basically the advantage of having function scope is that there is a very useful pattern that of course uses closure only. In that pattern what we do is we return an object from the function and that object has access to all the variables defined within that function. And only that object has access and from outside the scope of that function you cannot access those variables. So this pattern is being used in several ways that I will show later. And it is used in certain optimizations as well. For that optimization I have an example and in that example the closure thing will also come up. So this is a very simple is trying number function. So call it on a number it will tell whether it is a trying number or not, true or false. So using this function scope thing we are trying to create an optimization here. The optimization is that. So the advantage we are getting out of this is that if it is already calculated is prime for a certain value then it will not calculate it again. Instead it will keep it in a cache. So that cache is maintained within the function itself and that cache is not visible from outside. So this code is from the previous is trying function. What we are doing additional here is that we have declared a cache. And if that cache contains that number that we have passed then it will fetch the value right from the cache and not do all this. That is the optimization. And if it is not present then it will do all this and add the number to the cache. So what really is the thing to be noted here is we have declared two functions here. So one is the main is prime function and the other is is prime inner function. So is prime inner function can access cache and all but anything outside of is prime cannot access cache. That is one. Second is we are invoking is prime function immediately. So rather the function that we are trying to bind to is prime we are invoking it immediately. That is the two parenthesis over there. And by invoking this we are actually trying to return the inner function. So it is a function that returns another function. And when we invoke is prime we are actually invoking this one is prime inner. So this entire thing is called only once cache and all is created. And every time we try to call is prime we are actually invoking is prime inner. And because is prime inner always in future will have a link to cache it will be able to use it. And that is the advantage of this scope and closure. So just now we have been talking about this in the other session where I think during the memory optimization they said the closure is optimized in the browser so that if a number is being used inside a function that accesses the closure. Only those variables will be kept in memory where the rest of them will be garbage collected. So like for example if you do this particular case now it is a value that you are going to pass. Right. But assume that the cache is accessed with a hard coded num value. Okay. I understand the rest of them will be garbage collected. So I am not really sure but I did not really get your point. So you are saying that what rest of the values are you talking about? So for example if cache let us say has P001 I think is a purchase order object. Okay. And then it has P002 which has another instance of a purchase order. Okay. I am just giving a yes let us assume it is a yes. Yeah right. So if you are accessed cache P001 hard coded. Okay. In the return of let us say is prime either. Okay. Then purchase order P002 would have been garbage collected. Same number in the load scale. So. So what you thought about in the. Okay maybe so I am not aware of that optimization. If browser makes that optimization but as far as I have understood so far the use scope. So I am guessing so what I am saying is if we call this is prime say 10 times then the cache will have 10 values and it will and those 10 values will be there and they will not be removed that is what I am saying. You are saying in browser there is an optimization where that cache is. Okay. Okay yeah so yeah I am not aware of that. Object creation happens in these two styles so yeah so I changed the chapter actually. I am going to constructors and prototypes. So these two styles are rather the first style is the most popular everybody uses it. The second style is the latest standard where we pass in an object that the created object should inherit from. The third is what I will be talking more about probably. So every object has a prototype property and prototype is an internal property alright I talked about all this we want to get the prototype we have to have the prototype Instructed functions yeah so may use these. Also 10 minutes sir. 10 minutes. So what I really wanted to demonstrate here is that if you try to create an object so this and check if it is having a prototype property it does not have and if you try to create a function like this and check if the function has a prototype it does have something. So this got me really surprised. The thing is that object obj and function f both have prototype. The prototype they have is the prototype internal property which. What if I put f dot prototype dot prototype. What if you put f dot prototype dot prototype. So if you want to check let's check. So f dot prototype is an ordinary object not a function object so it does not have a prototype property by default. So objects ordinary objects do not have a prototype property by default only function objects have prototype property but ordinary objects have prototype. So if we check this we get something if we check this we get something. So prototype this underscore underscore proto this is the linkage that defines what object this object is going to inherit from. So it is very well known everybody says that in JavaScript we have only objects we don't have classes so for inheritance objects have to inherit directly from objects. That's all okay. The problem is that inheritance object to object is not direct. That inheritance follows an indirection where why are we constructed. So this prototype property of the object this one is totally non standard we cannot use it and there is no way to set the object's prototype internal linkage by us. So JavaScript engines do that internally we are not supposed to set them unless you construct it. So once an object is created there is no way to set its prototype linkage or change its prototype linkage. Prototype linkages are not benefit. So that's the biggest point of my talk here that the biggest thing I discovered as learning JavaScript. Why would I set the type? For doing inheritance. So you have an object animal object you have cat object animal object has certain properties and methods you want cat to inherit them. You cannot do directly to follow the constructor root. So how the constructor root is taken. I have taken code from object.begin that's defined in Crockford's book the good part. So basically the function is that is going to be used as your objects constructed. That function the prototype property should be set to the parent object. So if you want an object to inherit from your parent object you have to create a function then set its prototype to the parent object and then create the child. So so far available to all environments this is the only way you can do it. Yeah that's it. Common use case here is the question why you do the common use cases. You create a JSON data structure from age. Okay. And then you are trying to convert the copy between let's say attach its prototype to an existing class so that you can directly open up the JSON data. Yeah that is fun. That's the use case. So how do you do that here? So I am talking about things much at much basic level than that example. So I don't know how to fix it in your example. But the thing is that you want an object that inherits from some other object. Okay. This is the only way to create it. Okay. So generally when you want an object generally you will have a constructed object. Okay. So like coffee script and all provide things like class and all. So what the class thing does is it just creates a constructor for your object. And that construct is nothing but a function with a capital first letter. So that's that's my convention. So you call that constructor with a new keyword and that's how you get a new object. And if you want that object to inherit something before calling that constructor you have to set the prototype property of that construct. Although now there is one more way. This is not implemented in I8 but the rest of the browsers have this object.create. Within create as a parameter you can pass the parent object. So this is one easy way. Constructing. Okay. So this is a diagram from the spec. So these dotted lines are the actual prototype linkages. The underscore underscore proto underscore underscore. This is your constructor function. And this is constructor function dot prototype the object. So these are all ordinary objects. This is also an ordinary object and this is a constructor function. Because this is a function it will definitely have a prototype property. You have to set it to your parent object and all your child objects can inherit from this. Another observation is that all objects any type will have a constructor property. Object dot constructor jk it will be there. But the problem is that the constructor property is mostly not useful except for the constructor property of the functions that we are going to use for creation of objects. Normally objects constructor property is not useful but it is there. Can you take a moment? Okay. But it will last time for Q and A. So far this is how objects inherit from other objects. But I have two patterns that are used in code mostly that I want to discuss where inheritance is actually being used. They are both popular. They have cross-incon. So I will quickly discuss them. So this is my vehicle class. If I was using profistit I would write class vehicle. Plain jama script it is just function vehicle. This is the constructor function. It will set the name of the vehicle position. In the prototype inheritance pattern what you do is you argument you add methods to the prototype of the constructor. So when we write vehicle dot prototype dot move so this move method is being added to the prototype object of vehicle constructor and the object created from vehicle constructor will now be able to use this move method. So this code actually is very clearly created when we use in class and coffee. There is no inheritance in here. So I just have a vehicle class and then have added two methods to it and then created a new vehicle object called mycars called the methods and here I have called the position property directly. That's the property of the object mycar. So we can do property lookups. We need them sometimes. When we have to create a child object what we do is we create a new constructor. So this is my child class two-wheeler. This is where I am specifying that two-wheeler is inheriting from vehicle and then after that adding methods to it. So my two-wheeler is pulsing. It is moving position. It can move is there in vehicle and it can give you the internal properties as well. Not internal properties but properties of the class as well. The problem, the good thing here is that this is pretty popular and usable and readable. The problem is that there is no way to hide data. Whatever properties your objects pulsar and mycar have they are visible everywhere. The other pattern that is used is called functional inheritance pattern. The advantage is that we get data hiding and visibility is more subjective. So basically here what we are doing is we are creating an object within a function. So we are not going to use the new operator here. We are not using the constructor pattern at all. So we are just defining a function called vehicle and we are creating the vehicle object within that function and returning that object. So whenever we call that vehicle function in both that function it gives an object. That's pretty... That's not prototype. Here this itself looks like a class. It's not exactly a class. So it doesn't match a class in many properties. So that's why it's functional inheritance. The advantage we get here is that if we try to call mycar that position we cannot get it because position variable has functions for so you cannot use it outside. The question was mycar that prototype will it return a variable because it doesn't use new? No. Mycar dot inheritance will not have anything. It will be undefined. But if you had done the earlier one mycar that prototype would have returned your... Right. And for having inheritance what we do is we define another function which looks like a class create the original parent class object and then add methods to that object itself. So this looks pretty simple and edit. The advantage we get is that we have data hiding and the disadvantage is that it doesn't look and feel like a class. So if you want things to behave more like class the prototype inheritance pattern is better. So I have... Like one question I guess. Like one question, final question. Say I follow the prototype of the inheritance pattern and I bring here that say class A inherits B and B inherits C. So I have a method on C which is coming from here. So is there any way I could find that is coming from here? Like how do I find from there? So exactly which... Where is that method exactly coming from? There is no direct method but you can add some has on property and all is there so you can keep subtracting and... There are methods to do it. There is no single operator for it. You can check whether it is coming from it by using instance of operator but which one it is coming from that's not direct. Alright. Thank you.