JS Inheritance Insights

Posted on | In | Comments: | Views:

I. Best Practice for Object Inheritance

What a “class” is made of in JavaScript:

  1. [private stuff] The constructor function. This function contains all the logic to create an instance of the “class”, i.e. instance specific code .
  2. [public stuff] The prototype object. This is the object the instance inherits from. It contains all methods (and other properties) that should be shared among all instances.

The constructor corresponds to private, and prototype corresponds to public in Java

Steps to inherit from another object:

  1. consturctor inherit

  2. prototype inherit

    • Benefits of using Object.create(Person) for inheritance rather than new Person()?

    • Actully this works because an Person instance inherits from the Person prototype object. But it also implies that every dog inherits from one specific Person instance. That seems to be a bit strange. Shouldn’t instance specific code only be run in the constructor function? Suddenly instance specific code and prototype methods seem to be mixed.

      We don’t actually want to run Person instance specific code at that moment, we only want all the methods from the Person prototype object. That is what Object.create lets us do

  3. prototype constructor correct

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* parent object: Person */
// 1.1 constructor
function Person(first, last, age, gender, interests) {
  this.name = {
    first,
    last
  };
  this.age = age;
  this.gender = gender;
  this.interests = interests;
};
// 1.2 prototype 
Person.prototype.greeting = function() {
  alert('Hi! I\'m ' + this.name.first + '.');
};

const John = new Person('John', 'Doe', 12, 'male', 'pingpong');

/* child object: Teacher */
// 2.1 constructor inherit
function Teacher(first, last, age, gender, interests, subject) {
  Person.call(this, first, last, age, gender, interests);
  this.subject = subject;
}
// 2.2 prototype inherit
Teacher.prototype = Object.create(Person.prototype);
// 2.3 prototype constructor correct
Teacher.prototype.constructor = Teacher;  
const TeacherSam = new Teacher('Teacher', 'Sam', 43, 'male', 'teaching', 'math');

II. prototype vs __proto__

  1. in JS, everything is an object except primitive value. objects can serve 2 goals:

    • prototype / class for other sub-object / sub-class. In this case, we can check prototype of a constructor‘s shared parent object [ie. prototype]
    • sub-object / sub-class of other prototype / class
    • NOTE:
      • an object created by new (constructor) doesn’t has prototype property, since it’s created with the hope to get an pure object!
      • If this object wants to have prototype property, then it must be the case we want this object to be a ‘super-class’, and inherited by ‘sub-class’. This way, we will need to attach prototype to this object. Also, we need to create shared field or method onto prototype (otherwise, if nothing inside prototype, are we dumb to create all fields in memory without putting shared stuff inprototype??? )
      • On the other hands, an object created by new (constructor) always has __proto__ property, in which we can know:
        1. the constructor of this object
        2. other shared methods or fields of its prototype
      • An prototype will always have a constructor property, to tell its corresponding U associated to this ‘class’ prototype

  2. prototype is the object that is used to build __proto__ when you create an object with new. It is used by constructor() functions. It should’ve really been called something like, “prototypeToInstall”, since that’s what it is.

  3. __proto__ is the actual object that is used in the lookup chain to resolve methods, pointing to its prototype. It is that “installed prototype” on an object (that was created/installed upon the object from said constructor() function)

    1
    2
    ( new Foo ).__proto__ === Foo.prototype;
    ( new Foo ).prototype === undefined;

Reference

  1. https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance
  2. https://stackoverflow.com/questions/17392857/benefits-of-using-object-create-for-inheritance
  3. https://stackoverflow.com/questions/8453887/why-is-it-necessary-to-set-the-prototype-constructor
  4. https://stackoverflow.com/questions/9959727/proto-vs-prototype-in-javascript