prototype 120102020133-phpapp02
DESCRIPTION
this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality score, this is to check virality scorTRANSCRIPT
![Page 1: Prototype 120102020133-phpapp02](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b79ece4a795993718b4658/html5/thumbnails/1.jpg)
inheritencein
Javascript
Aditya GaurMentor: Apurba Nath, Satya Prakash
![Page 2: Prototype 120102020133-phpapp02](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b79ece4a795993718b4658/html5/thumbnails/2.jpg)
Why inheritence ?
![Page 3: Prototype 120102020133-phpapp02](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b79ece4a795993718b4658/html5/thumbnails/3.jpg)
Creating a hierarchy Code reuse
![Page 4: Prototype 120102020133-phpapp02](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b79ece4a795993718b4658/html5/thumbnails/4.jpg)
Classical inheritance
Objects are instances of classes
A Class inherits from other class
![Page 5: Prototype 120102020133-phpapp02](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b79ece4a795993718b4658/html5/thumbnails/5.jpg)
Prototypal inheritance
A prototypal language is a class less object oriented language. OOP without classes – now that’s weird
Here Objects inherit from objects What could be more object oriented than this! Code reuse done via cloning
![Page 6: Prototype 120102020133-phpapp02](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b79ece4a795993718b4658/html5/thumbnails/6.jpg)
How do we do this?
![Page 7: Prototype 120102020133-phpapp02](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b79ece4a795993718b4658/html5/thumbnails/7.jpg)
prototype
A prototype is an object used to implement structure, state, and behaviour inheritance in ECMAScript.
![Page 8: Prototype 120102020133-phpapp02](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b79ece4a795993718b4658/html5/thumbnails/8.jpg)
So, what kind of objects contain the prototype object?
![Page 9: Prototype 120102020133-phpapp02](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b79ece4a795993718b4658/html5/thumbnails/9.jpg)
Each and every object(Except the Object.prototype)
![Page 10: Prototype 120102020133-phpapp02](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b79ece4a795993718b4658/html5/thumbnails/10.jpg)
What ! But when I do { }.prototype, I get null
:-/
![Page 11: Prototype 120102020133-phpapp02](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b79ece4a795993718b4658/html5/thumbnails/11.jpg)
So what is prototype actually?
The true prototype of an object is held by the internal [[Prototype]] property.
This is represented as __proto__ in some of the browsers like firefox.
__proto__oldObjectnewObject
![Page 12: Prototype 120102020133-phpapp02](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b79ece4a795993718b4658/html5/thumbnails/12.jpg)
Accessing the prototype
Most browsers support the non standard accessor __proto__ .
ECMA 5 introduces the standard accessor Object.getPrototypeOf(object)
Use object constructor. object.constructor.prototype
![Page 13: Prototype 120102020133-phpapp02](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b79ece4a795993718b4658/html5/thumbnails/13.jpg)
Example var baseObject = { firstMethod: function () {alert(“first method");}, secondMethod: function () {alert(“second method");}};
var extendedObject = {};extendedObject.thirdMethod = function () {alert(“third method")};extendedObject.__proto__ = baseObject;extendedObject.firstMethod();extendedObject.thirdMethod();
firstMethod secondMethod__proto__
thirdMethod__proto__
baseObjectextendedObject
![Page 14: Prototype 120102020133-phpapp02](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b79ece4a795993718b4658/html5/thumbnails/14.jpg)
Prototype chaining
When an object is asked to evaluate property foo, JavaScript walks the prototype chain (starting with object a itself), checking each link in the chain for the presence of property foo.
If and when foo is found it is returned, otherwise undefined is returned.
![Page 15: Prototype 120102020133-phpapp02](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b79ece4a795993718b4658/html5/thumbnails/15.jpg)
var baseObject = { name: "FooBarBaz", getModifiedString : function(){ return "Hello " + this.name; }};var extendedObject = { age : 10};extendedObject.__proto__ = baseObject;extendedObject.getModifiedString();extendedObject.toString();
name getModifiedString__proto__
age__proto__
baseObject
extendedObject
toString__proto__
Object.prototype
null
![Page 16: Prototype 120102020133-phpapp02](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b79ece4a795993718b4658/html5/thumbnails/16.jpg)
OK, So what was the prototype we were talking about in the last session?
![Page 17: Prototype 120102020133-phpapp02](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b79ece4a795993718b4658/html5/thumbnails/17.jpg)
Prototype property in functionsvar newClass = function (){var privateVal = 10;this.publicVal = 20;}newClass.prototype.sharedVal = 30;
what's this?
The functions in JavaScript are objects and they contain methods and properties.
One of property of the function objects is prototype. A function’s prototype property is the object that will
be assigned as the prototype ([[Prototype]] ) to all instances created when this function is used as a constructor.
![Page 18: Prototype 120102020133-phpapp02](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b79ece4a795993718b4658/html5/thumbnails/18.jpg)
examples
//function will never be a constructor but it has a prototype property anywayMath.max.prototype; //[object Object]
//function intended to be a constructor has a prototype toovar A = function(name) {this.name = name;}A.prototype; //[object Object]
//Math is not a function so no prototype propertyMath.prototype; //null
Every function has a prototype property, and the objects which are not function don’t have the prototype property.
![Page 19: Prototype 120102020133-phpapp02](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b79ece4a795993718b4658/html5/thumbnails/19.jpg)
examples
function Foo(name){ this.name = name;}Foo.prototype.getName = function(){ return this.name;}var obj = new Foo("bar");obj.getName();
Fooprototype__proto__
constructorgetName
objname__proto__
Function.prototype
![Page 20: Prototype 120102020133-phpapp02](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b79ece4a795993718b4658/html5/thumbnails/20.jpg)
Examples (augmentation)
function Foo(name){ this.name = name;}Foo.prototype.getName = function(){ return this.name;};var obj = new Foo("bar");obj.getName(); //barFoo.prototype.getFullName = function(){return "Foo" + this.name;};obj.getFullName();// Foobar
Note that the prototype is "live". Objects are passed by reference in JavaScript, and therefore the prototype is not copied with every new object instance.
It means that prototype property can be changed at any time and all the instances will reflect the change.
![Page 21: Prototype 120102020133-phpapp02](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b79ece4a795993718b4658/html5/thumbnails/21.jpg)
A catch
function Foo(name){ this.name = name;}Foo.prototype.getName = function(){ return this.name;};var obj = new Foo("bar");obj.getName(); //barFoo.prototype = { getFullName : function (){ return "FOO" + this.name; }};obj.getFullName();// ERRORobj.getName(); //barvar obj2 = new Foo("baz");obj2.getFullName(); //FOObaz
If the prototype property is completely replaced the object still points to the original prototype ([[Prototype]] )
![Page 22: Prototype 120102020133-phpapp02](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b79ece4a795993718b4658/html5/thumbnails/22.jpg)
Object.create = function (o) { function F() {} F.prototype = o; return new F(); };
Creates a new object with the specified prototype object and properties
Introduced in ECMAscript 5.
Object.create
![Page 23: Prototype 120102020133-phpapp02](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b79ece4a795993718b4658/html5/thumbnails/23.jpg)
var func = function(){ alert(this); this.aVar =10;}var aVar = func();
The new keyword. If we forget the new keyword, “this” is bounded to global object.
Also gives an impression of classical inheritance
Deprecated __proto__
Object.create. Why ?
![Page 24: Prototype 120102020133-phpapp02](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b79ece4a795993718b4658/html5/thumbnails/24.jpg)
Douglas Crockford’s video lecture on Advanced javascript
Mozilla developer network
References
![Page 25: Prototype 120102020133-phpapp02](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b79ece4a795993718b4658/html5/thumbnails/25.jpg)
Thank you