Upload
aditya-gaur
View
1.718
Download
0
Tags:
Embed Size (px)
Citation preview
inheritencein
Javascript
Aditya GaurMentor: Apurba Nath, Satya Prakash
Why inheritence ?
Creating a hierarchy Code reuse
Classical inheritance
Objects are instances of classes
A Class inherits from other class
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
How do we do this?
prototype
A prototype is an object used to implement structure, state, and behaviour inheritance in ECMAScript.
So, what kind of objects contain the prototype object?
Each and every object(Except the Object.prototype)
What ! But when I do { }.prototype, I get null
:-/
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
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
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
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.
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
OK, So what was the prototype we were talking about in the last session?
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.
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.
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
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.
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]] )
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
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 ?
Douglas Crockford’s video lecture on Advanced javascript
Mozilla developer network
References
Thank you