prototypal inheritance concept in javascript as a prototype based language

by

Classical inheritance is about extending types of things. Say you have a class, like Bike. When you want extend the behaviour, you have to design a new type of bike (like MotorBike).

It’s like building a factory – you make lots of blueprints, and blueprints that reference those blueprints, but in order to ride one you have to take the blueprint and make something from it.

Prototype-based inheritance is about extending things themselves. Say you have a way of making Bike objects. You take one of these Bikes into your garage, and you strap a jet engine to it.

This is not according to the blueprint. This is something you’ve done to this particular bike. But your friends see your contraption and want one too. So instead of making a blueprint for your new design, you stick up a sign saying “JetBike factory” and just start making more of them. And every time you can’t remember how something fits together, instead of looking at a blueprint you just look at your original bike. Your original bike is the prototype bike, and all the new bikes are based on it.

Now, for a genuine 6-year-old, that’s probably where I’d stop (if I hadn’t lost them already), but in reality prototype-based inheritance doesn’t just construct copies, it does something even cooler – it actually links the new JetBike objects to the original prototype bike you have in your garage. If you replace the suspension on your prototype bike, then all your friends’ bikes will also magically have their suspension replaced as well.

Let’s look at some JS-ish pseudo-code:

function Bike() {
    this.wheels = 2;
}
Bike.prototype = {
    ride: function() {
        // Ride the bike
    },
    crash: function() {
        // Fall off the bike
    }
};

function JetBike() {
    this.engines = 2;
}
// Start with an ordinary bike
JetBike.prototype = new Bike();
// Modify it
JetBike.prototype.fly = function () {
    // Engage thrusters and head for the ramp
};

More Related Contents:

  1. What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
  2. Why is extending native objects a bad practice?
  3. __proto__ VS. prototype in JavaScript
  4. Properties of Javascript function objects
  5. Grasping prototypical Inheritance through pseudoclassical instantiation (JavaScript)
  6. How to access object prototype in javascript?
  7. [[Prototype]] vs prototype: ..what is the difference? (MyCons.__proto__ === MyCons.prototype) equals FALSE
  8. Prototypical inheritance – writing up [duplicate]
  9. Use of ‘prototype’ vs. ‘this’ in JavaScript?
  10. Crockford’s Prototypal inheritance – Issues with nested objects
  11. What is the significance of the Javascript constructor property?
  12. Defining a Javascript prototype
  13. How does __proto__ differ from constructor.prototype?
  14. Why use Object.prototype.hasOwnProperty.call(myObj, prop) instead of myObj.hasOwnProperty(prop)?
  15. Trigger an event with Prototype
  16. In JavaScript, why typeof Function.prototype is “function”, not “object” like other prototype objects?
  17. Setting methods through prototype object or in constructor, difference? [duplicate]
  18. JavaScript: instanceof operator
  19. How to pass Ruby variables to a JavaScript function in a Rails view?
  20. Update parent scope variable in AngularJS
  21. Javascript inheritance: call super-constructor or use prototype chain?
  22. Why does String.prototype log it’s object like a standard object, while Array.prototype logs it’s object like a standard array?
  23. Why is JSON.stringify not serializing prototype values?
  24. Is John Resig’s Javascript inheritance snippet deprecated?
  25. this Vs. prototype [duplicate]
  26. What does the new keyword do under the hood?
  27. ‘this’ is undefined in JavaScript class methods
  28. JavaScript: What are .extend and .prototype used for?
  29. JS defineProperty and prototype
  30. Img src path with header params to pass

Leave a Comment