Downloaded 36 times
Uploaded byJussi Pohjolainen
JavaScript Inheritance
The document discusses JavaScript inheritance. It explains that JavaScript uses prototype-based inheritance rather than class-based inheritance. It provides examples of how to implement inheritance by linking object prototypes together through the __proto__ property or Object.create method. Functions in JavaScript have a prototype property that is used to inherit properties and methods onto objects created with new.
In this document
Powered by AI
Overview of inheritance, its importance for code reuse, and how JavaScript handles inheritance as prototype-based.
JavaScript's prototype object, how inheritance occurs, and the significance of the __proto__ property.
Demonstrates how child objects inherit methods from parent objects and the deprecated __proto__.
Discusses the construction of objects via functions, highlighting constructor behavior and the use of the 'new' operator.
Examples demonstrating the inheritance of properties and methods through constructor functions and prototypes.
Explains how every function is an object, properties' lookup via prototypes, and example implementations for function behavior.
Describes the constructor property associated with prototypes and potential pitfalls in inheritance.
Details of EcmaScript 5's prototypal inheritance pattern including Object.create() and its use in creating new objects.
JavaScript Inheritance
- 1.
- 2. About Inheritance • Code reuse is important – Inheritance can help • JavaScript does not have classes, so no special keyword for extending • In JS you have lot of ways to do inheritance – Classical Pa@erns – Modern Pa@erns or Prototypal Inheritance
- 3. Understanding JS Inheritance • JS is not class based, it’s prototype-‐based! • Object inherit from another object • JS contains syntax and features that make it seem class based
- 4. Understanding Prototypes • Prototype is an object from which other objects inherit properGes • Any object can be a prototype • Every object has internal __proto__ property
- 5. Example var parent= { method1: function() { print("A"); } } var child = { __proto__: parent, method2: function() { print("B"); } } // If method1 is not found in child, look it from // prototype! child.method1(); // A child.method2(); // B
- 6. __proto__ • __proto__ is depricated and should not be used (but it works) • To get the prototype, use – Object.getPrototypeOf(object) • It’s read only! • How to set? – Proposal: Object.setPrototypeOf(obj, prototype) • Not possible to change the __proto__ ..!
- 7. FuncGon Object • When wriGng – function Animal() { } • Lot of things happens! – Two objects created: • 1) Animal • 2) Animal.prototype – Animal.prototype has a property constructor, that points to Animal
- 8. FuncGon Object //This is just a function. Dog is Function object! function Dog (name) { this.name = (name); } var spot = new Dog("Spot"); // true print(spot instanceof Object); // true print(Dog instanceof Function); // true print(Dog instanceof Object);
- 9. FuncGon Object functionsum1(a, b) { return a + b; } // => var sum2 = new Function("a","b", "return a+b;"); print(sum1(2,2)); // 4 print(sum2(2,2)); // 4 print(sum2.length); // number of args = 2 print(sum2.toString());
- 10. The “new” Operator function Person() { this.name = “Jack”; } // Normal function call Person(); // Object creation var p = new Person();
- 12. Example function Cat(){ } // c.__proto__ points to Cat.prototype! var c = new Cat(); // true print(c.__proto__ === Cat.prototype); // c inherites Cat.prototype! Cat.prototype.age = 12; // 12! print(c.age);
- 13. Example function Cat(){ this.name = "Jack"; } var c = new Cat(); // true print(c.__proto__ === Cat.prototype); // c inherites Cat.prototype! Let's add stuff. Cat.prototype.age = 12; Cat.prototype.saySomething = function() { print(this.name + ": hello!"); } // 12! print(c.age); // "Jack: hello!" c.saySomething();
- 14. /** PERSON **/ functionPerson() { } var jack = new Person(); // jack inherites Person.prototype! print(jack.__proto__ === Person.prototype); Person.prototype.age = 18; print(jack.age); // 18; //** STUDENT **/ function Student() { } // Let's now change the prototype of Student. // Now Student.prototype points to Person. var temp = new Person(); Student.prototype = temp; var tina = new Student(); // tina inherites Student.prototype.. which is now temp! print(tina.__proto__ === Student.prototype); // true print(tina.__proto__ === temp); // true // Now tina inherites Student.prototype, which is // Person object, which inherites the Person.prototype.. print(tina.age); // 18!
- 15. Example /** Person**/ function Person() { this.name = "Jack"; } // Adding functionality to the prototype.. Person.prototype.say = function() { print(this.name + ”: hello!"); } /** Student **/ function Student() { } // Inheritance Student.prototype = new Person(); /** Test **/ var student = new Student(); student.say(); // Jack: Hello Person.prototype say() new Person() name = “Jack” __proto__
- 16. Example /** Person**/ function Person() { this.name = "Jack"; } // Adding functionality to the prototype.. What is this?? Person.prototype.say = function() { print(this.name + ”: hello!"); } /** Student **/ function Student() { } // Inheritance Student.prototype = new Person(); /** Test **/ var student = new Student(); student.say(); // Jack: Hello Person.prototype say() new Person() name = “Jack” __proto__ new Student() __proto__
- 17. FuncGon Object • Every funcGon in JS is a FuncGon object • When – var spot = new Dog(“spot”); • Then spot’s __proto__ points to Dog.prototype! • If a property cannot be found in an object, it is searched for in that object's prototype.
- 18. Example // here'sthe constructor: function Point() { } var a = new Point(); print (a.x); // undefined // set up the prototype object to have some values: Point.prototype = { x: 10, y: 20 }; // or you could do this: Point.prototype.z = 30; // make a new Point object // (a object gets an implicit reference to Point.prototype object) var a = new Point(); // Since a does not hold a property, let's look it from Point.prototype print (a.x);
- 19. Example // here'sthe constructor: function Point() { this.x = 10; this.y = 20; } // set up the prototype object to have some values: Point.prototype.z = 40; // make a new Point object // (a object gets an implicit reference to Point.prototype object) var a = new Point(); // Since a does not hold a property, let's look it from Point.prototype print (a.z);
- 20. //** POINT ** functionPoint() { } // set up the prototype object to have some values: Point.prototype = { x: 10, y: 20 }; /** PIXEL **/ function Pixel() { } Pixel.prototype = new Point(); Pixel.prototype.color = "red"; // make a new Point object // (a object gets an implicit reference to Point.prototype object) var a = new Pixel(); var b = new Pixel(); a.color = "blue"; // Since a does not hold a property, let's look it from Point.prototype print (a.color); print (b.color);
- 21. About constructors • Prototype properGes of FuncGons have a constructor property: – var dog = new Dog(); – dog.constructor == Dog; // TRUE • This will break when doing inheritance!
- 22. /** Person **/ functionPerson() { } Person.prototype.name = "Jack"; /** Student **/ function Student() { this.id = "12345"; } // Inheritance Student.prototype = new Person(); Student.prototype.id = "12345"; /** Test **/ var student = new Student(); student.age = 22; print(student.age) print(student.name); print(student.id); var person = new Person(); print(person.constructor === Person); // TRUE var student = new Student(); print(student.constructor === Student); // FALSE
- 23. /** Person **/ functionPerson() { } Person.prototype.name = "Jack"; /** Student **/ function Student() { this.id = "12345"; } // Inheritance Student.prototype = new Person(); Student.prototype.id = "12345"; // FIX Student.prototype.constructor = Student; /** Test **/ var student = new Student(); student.age = 22; print(student.age) print(student.name); print(student.id); var person = new Person(); print(person.constructor === Person); // TRUE var student = new Student(); print(student.constructor === Student); // FALSE
- 24. Inheritance: Prototypal • In EcmaScript 5 a protypal inheritance pa@ern is part of the language – Object.create() – var child = Object.create(parent); • The create-‐funcGon function create(o) { function F() {} f.prototype = o; return new F(); }
- 25. Example function Point(x,y){ this.x = x; this.y = y; } var pixel = Object.create(new Point(12,0)); pixel.color = "red"; print(pixel.x); print(pixel.color);