JSFiddle - React, Tailwind, and code Playground

by Ryan Morris

JavaScript

/**
 * prototype
 *
 * all Function objects have a prototype property
 * it is the prototype of the object used when constructing new objects with "new"
 
 * all objects have a "__proto__" property, which references its prototype.
 * it is referencing the object that is used in the lookup chain to resolve methods
 * it points to the prototype of the constructor of the object
 */

// a constructor
function Point(x, y) {
    this.x = x;
    this.y = y;
}

// an instance using the "new" keyword
var myPoint = new Point();

// and so the following are all true
console.group("Point truths");
console.log(myPoint.__proto__ == Point.prototype);
console.log(myPoint.__proto__.__proto__ == Object.prototype);
console.log(myPoint instanceof Point);
console.log(myPoint instanceof Object);
console.groupEnd();

/**  
 * some exploration 
 */

// named function
function NamedFunction() {}

console.group("Named Function");
console.log(NamedFunction);
console.log(NamedFunction.prototype); // itself
console.log(NamedFunction.prototype.__proto__); // Object
console.log(NamedFunction.__proto__);
console.log(NamedFunction.constructor);
console.groupEnd();

// var function
var varFunction = function() {}

console.group("Var Function");
console.log(varFunction);
console.log(varFunction.prototype); // Object
console.log(varFunction.__proto__);
console.log(varFunction.constructor);
console.groupEnd();

// experiment
var instanceOne = varFunction();
var instanceTwo = new varFunction();

console.group("Instance One");
console.log(instanceOne);
//console.log(instanceOne.prototype); undefined/error
//console.log(instanceOne.__proto__); undefined/error
console.groupEnd();

console.group("Instance Two");
console.log(instanceTwo);
console.log(instanceTwo.prototype);
console.log(instanceTwo.__proto__);
console.groupEnd();

// object literals do not have a prototype property defined
var objectLiteral = {}

console.group("Object...