JSFiddle - React, Tailwind, and code Playground

by Ming Huang

JavaScript

// TOPIC 1: prototype of a constructor/class
let School = function(name){
    this.name = name;
    this.printName = ()=>{
        console.log(this.name);
    }
}

School.prototype.country = 'USA'

// MiddleSchool is a subconstructor which we want to inherite the prototypes from School class

let MiddleSchool = function(name){
    // ***first grab the base class properties by calling the base class function
    School.call(this, name);

    this.minGrade = 6;
}
// ***next we will get the inherited prototype from School.prototype
// Object.create will create object without the constructor
MiddleSchool.prototype = Object.create(School.prototype);
// ***When using function as a constructor it automatically assigns itself to its prototype.constructor
// ***the above line will get rid of MiddleSchool's constructor function so we have to re-assign it
MiddleSchool.prototype.constructor = MiddleSchool;


// TOPIC 2: object doesn't have prototype object, 
// but it has __proto__ which shows its constructor/class's prototype
// when we initilize an object from a constructor class then we can see the object's constructor's prototype
let mySchool = new MiddleSchool('skyline');

// if we don't reassign the MiddleSchool.prototype.constructor = MiddleSchool,
// mySchool is an instance of School, not Middle School because it inherited the School's constructor
// console.dir(mySchool);

// console.dir(mySchool.country);

// TOPIC 3: __proto__ returns the prototype of the object's constructor
// Where prototype is a property belonging only to functions

console.log(mySchool.constructor);