(English) Understanding JS: Notes 05 (Object-Oriented Javascript and Prototypal Inheritance)

Rất tiếc, mục này chỉ tồn tại ở Tiếng Anh (Mỹ). For the sake of viewer convenience, the content is shown below in the alternative language. You may click the link to switch the active language.

Conceptual Aside – Classical vs Prototypal Inheritance

Inheritance: One object gets access to the properties and methods of another object.

Classical Inheritance: What’s currently best known and popular (C#/Java). It’s been done this way for a long time. Classical inheritance can be verbose

Prototypal Inheritance: Is simple, flexible, extensible and easy to understand. Not perfect but the teacher prefers this method.

Understanding the Prototype

All objects (including functions) have a prototype property which is a reference to another object (in this case we’ll call it proto).

Because of this, an object can access the property and methods of the object that is references in its prototype property. So in this example, if we try to access


, it will first look for that property on obj, if it doesn’t find it, then it will move up through the prototype change looking for prop2. Fortunately, we don’t have to do anything like obj.prototype.prop2 to find it. We just call our first obj and the property we want to access. Since these are all just references to other objects, it is also possible to have more than one object point to the same prototype and as a result, share some properties.

One way to set the prototype property is to use


but this is a TERRIBLE IDEA. We should never do this. Just showed this for demo purposes only.

Everything is an object (or a primitive)

In javascript, everything has a prototype (except for primitives). So these things all have access to built in objects that have some specific methods. Functions for example have access to call, apply, bind that is part of a built in object in JS that has all of these methods on it. Arrays have things like push, reduce, etc. The JS engine sets these prototypes for you. If you get the prototype of the prototype of an array (ex


), you’ll find that functions, arrays, and objects all come from objects. That is the bottom of the prototype chain.

Reflection and Extend

Reflection: an object can look at itself, listing and changing its properties and methods.

Being able to look at oneself allows for a feature called extend. This isn’t a part of JS, but many libraries and frameworks create this method because it is useful. The idea is that with extend, you can compose (add properties/methods from one object to another).

If we look at the underscore.js library, we can use their extend method as follows.

Here we use extend to add the properties from Jane and Jim to John. This method is actually fairly simple to implement as well if we wanted to do it ourselves. Pseudocode would look something like

function extends (obj1, .. others) {

     if arguments is less than 2, return obj

     for loop over number of objects

          for loop over properties in objects

               save prop to obj1

     return obj