JSFiddle - React, Tailwind, and code Playground

by wolfpackt99

HTML

<!DOCTYPE HTML>
<html>
    <head>
        <title>Title of the document</title>
    </head>
    
    <body>
        The content of the document......
        <div id='placeholder'>{placeholder}</div>
        <div id='othermother'>{other}</div>
    </body>
    
</html>

JavaScript

var Person = function(firstname, lastname) {
    this.FirstName = firstname;
    this.LastName = lastname;

    return this;
}

//Won't get the prototyped objects;
var trent = new Person("Trent", "Jones");

Person.prototype = {
    isMarried: false,
    FullName: function() {
        return this.FirstName + " " + this.LastName;
    }
}

//gets the prototyped objects
var mel = new Person("Mel", "Gibson");
mel.likesSandwiches = true;

var you = new Person("Curtis", "Blow");

Person.prototype.FullName = function(){ return "Help"; }
//singleton.
var Car = {
    Make: "",
    Model: "",
    Business : function() {
        return this.Make + " " + this.Model;
    }
};

//most frameworks offer a 'clone' variant. jQuery uses extend, true = deepcopy
var trentscar = $.extend(true, {}, Car);
trentscar.Make = "Honda";

Car.Business = function(){ return "skittles"; };

$("#placeholder").html("Name: " + trent.FirstName + ", isMarried: " + trent.isMarried);
$("#othermother").html("Name: " + mel.FirstName + ", isMarried: " + mel.isMarried + ", FullName: " + mel.FullName());
$("#othermother").append("<p>Make: " + trentscar.Make + ", Business: " + trentscar.Business() + "</p>");

Iterate(trent);
Iterate(mel);
Iterate(you);
Iterate(Car);
Iterate(trentscar);

function Iterate(obj) {
    for (name in obj) {
        //hasOwnProperty won't traverse the prototyped properties
        if (obj.hasOwnProperty(name)) {
            console.log(name + "::" + obj[name]);
        }
        else {
            console.log("prototyped=>" + name + "::" + obj[name]);
        }
    }
    console.log("---------------------------------");
}