JSFiddle - React, Tailwind, and code Playground

by Brenton Strine

HTML

see console.

JavaScript

console.log("For each Method below, the initial value of `propA` should be overwritten, a new own property for `propB` should be added, and the initial inheritied value of `propB` should be visible by inspecting the `__proto__` property");

// Standard constructor syntax with `new` and `prototype`.
var ObjConstructor = function(){
	this.propA = "ownProp";
};
ObjConstructor.prototype.propB = "inheritedProp";
var obj = new ObjConstructor();

obj.propA = "changedPropA";
obj.propB = "changedPropB";
console.log("Standard method:")
console.log(obj);

// Object all objects below will prototypically inherit
var parentObj = {
	propB: "inheritedProp",
};

// Method 1
var obj1 = {
	propA: "ownProp",
	__proto__: parentObj,
};

obj1.propA = "changedPropA";
obj1.propB = "changedPropB";
console.log("Method 1:")
console.log(obj1);

// Method 2
var obj2 = Object.create(parentObj, {
	propA: {value: "ownProp", writable: true,},
});

obj2.propA = "changedPropA";
obj2.propB = "changedPropB";
console.log("Method 2:")
console.log(obj2);

// Method 3
var obj3 = Ob({
	___inherits: parentObj,
  propA: "ownProp",
});

function Ob (o) {
	var object;
	if (o.___inherits) {
    object = Object.create(o.___inherits);
	  delete o.___inherits;
  	for (var p in o) {
      if (o.hasOwnProperty(p)) {
         object[p] = p;
      }
  	}
  } else {
	  delete o.___inherits;
    object = o;
  }
  return object;
};

obj3.propA = "changedPropA";
obj3.propB = "changedPropB";
console.log("Method 3:")
console.log(obj3);

// Method 4
var obj4 = Inherit(parentObj, {
  propA: "ownProp",
});

function Inherit (i, o) {
	var object;
	if (i) {
    object = Object.create(i);
  	for (var p in o) {
      if (o.hasOwnProperty(p)) {
         object[p] = p;
      }
  	}
  } else {
    object = o;
  }
  return object;
};

obj4.propA = "changedPropA";
obj4.propB = "changedPropB";
console.log("Method 4:")
console.log(obj4);

// Method 5
Object.prototype.inherit = function(i){
	//Messing with Javascript!!
	var self = this;
...