add proto chaining

Author: gambitier

session 1/chapters/3. Prototypes.md

@@ -13,6 +13,8 @@ function Human(firstName, lastName) {
 
 var person1 = new Human('Virat', 'Kohli');
 var person2 = new Human('Sachin', 'Tendulkar');
+
+person1.__proto__.constructor === Human.prototype.constructor; //true
 ```
 
 ![problemWithObjectConstructor](../images/ProblemWithConstructorrObjectCreation.jpg)

session 1/chapters/4. Prototype Chaining.md

@@ -0,0 +1,51 @@
+# Prototype Chaining, the way to achieve Inheritance in Javascript
+
+JavaScript does not have classes unlinke other languages. It uses the concept of prototypes for inheritance
+
+Prototype chaining means an objects dunder proto or proto will point to another object instead of pointing to the constructor function prototype.
+
+If the other object's dunder proto or proto property points to another object it will results into chain. This is prototype chaining.
+
+![protoChain](../images/protoChain.jpg)
+
+```javascript
+//SuperType constructor function
+function SuperType() {
+	this.name = 'Virat';
+}
+
+//SuperType prototype
+SuperType.prototype.getSuperName = function () {
+	return this.name;
+};
+
+//SubType prototype function
+function SubType() {
+	this.age = 26;
+}
+
+//Inherit the properties from SuperType
+SubType.prototype = new SuperType();
+
+//Add new property to SubType prototype
+SubType.prototype.getSubAge = function () {
+	return this.age;
+};
+
+//Create a SubType object
+var subTypeObj = new SubType();
+console.log('subTypeObj.name', subTypeObj.name); //Output: Virat
+console.log('subTypeObj.age', subTypeObj.age); //Output: 26
+console.log('subTypeObj.getSuperName()', subTypeObj.getSuperName()); //Output: Virat
+console.log('subTypeObj.getSubAge()', subTypeObj.getSubAge()); //Output: 26
+```
+
+**Note: New methods must be added to the SubType after the inheritance because inheritance overwrites the existing prototype of SubType**
+
+![inheritance](../images/inheritance.jpg)
+
+# Problems with prototype chaining
+
+As all the properties of the super type prototype are shared among the child objects, if one child modifies the property of the Super type prototype, other childs also gets affected. This issue has been explined in greate details here
+
+To fix this issue, we use constructor to inherit the instance properties and prototype chaining to to inherit methods and share properties

session 1/images/inheritance.jpg

@@ -1,17 +1,56 @@
-function Foo() {}
+//SuperType constructor function
+function SuperType() {
+	this.name = 'Virat';
+}
 
-const dunderProtoEqualsPrototypeOfFunction =
-	new Foo().__proto__ === Foo.prototype;
+//SuperType prototype
+SuperType.prototype.getSuperName = function () {
+	return this.name;
+};
 
-const actualObjectDontHavePrototype = new Foo().prototype === undefined;
+//SubType prototype function
+function SubType() {
+	this.age = 26;
+}
 
-console.log(
-	'dunder Proto Equals Prototype Of Function',
-	dunderProtoEqualsPrototypeOfFunction
-);
+//Inherit the properties from SuperType
+SubType.prototype = new SuperType();
 
-console.log('actual Object Dont Have Prototype', actualObjectDontHavePrototype);
+//Add new property to SubType prototype
+SubType.prototype.getSubAge = function () {
+	return this.age;
+};
 
-const fooObject = new Foo();
-console.log('fooObject is instance of Foo', fooObject instanceof Foo);
-console.log('fooObject is instance of Object', fooObject instanceof Object);
+//Create a SubType object
+var subTypeObj = new SubType();
+console.log('subTypeObj.name', subTypeObj.name); //Output: Virat
+console.log('subTypeObj.age', subTypeObj.age); //Output: 26
+console.log('subTypeObj.getSuperName()', subTypeObj.getSuperName()); //Output: Virat
+console.log('subTypeObj.getSubAge()', subTypeObj.getSubAge()); //Output: 26
+
+console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
+
+var subTypeObj2 = new SubType();
+console.log('2-subTypeObj.name', subTypeObj2.name); //Output: Virat
+console.log('2-subTypeObj.age', subTypeObj2.age); //Output: 26
+console.log('2-subTypeObj.getSuperName()', subTypeObj2.getSuperName()); //Output: Virat
+console.log('2-subTypeObj.getSubAge()', subTypeObj2.getSubAge()); //Output: 26
+
+console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
+
+subTypeObj2.name = 'akash';
+console.log('=======after changing the name property==========');
+console.log('2-subTypeObj.name', subTypeObj2.name); //Output: Virat
+console.log('subTypeObj.name', subTypeObj.name); //Output: Virat
+console.log('2-subTypeObj.getSuperName()', subTypeObj2.getSuperName()); //Output: Virat
+console.log('subTypeObj.getSuperName()', subTypeObj.getSuperName()); //Output: Virat
+
+console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
+
+var newObj = new SuperType();
+newObj.__proto__.getSuperName = () => {
+	return 'changed function definition';
+};
+
+console.log('2-subTypeObj.getSuperName()', subTypeObj2.getSuperName()); //Output: Virat
+console.log('subTypeObj.getSuperName()', subTypeObj.getSuperName()); //Output: Virat