JSFiddle - React, Tailwind, and code Playground

by tutorials2learn

HTML

<h2>Inheritance in Javascript</h2>
<div id="logger"></div>

CSS

.log-item{
    width:100%;
    border:1px solid #EEE;
    padding:10px 20px;
    font-family: 'Courier New', Courier, monospace;
}
.log-item p{
    color:green;
    
}
pre{
    text-align:right;
    font-size:  10px;
}

JavaScript

function SuperClass(){
    this.superClassMethod = function(){
        log('This was invoked from the superClass Method');
    }
}

function SubClass(){
    this.subClassMethod = function(){
        log('This was invoked from the subClass Method');
    }
}
    // SubClass Inherits the SuperClass
    SubClass.prototype = new SuperClass;

    // correct the constructor pointer
    SubClass.prototype.constructor = SubClass; 

var instanceA = new SubClass();

    // Method from SubClass
    instanceA.subClassMethod(); 
    
    // Method inherited from the SuperClass
    instanceA.superClassMethod(); 

    // "true": instanceA inherited the SuperClass
    log(instanceA instanceof SuperClass); 
    
    // "true": instanceA is an instance of SubClass
    log(instanceA instanceof SubClass); 











// log Results function
function log(arg){
    var timeStamp = new Date();
    var printStr = timeStamp+'<br />'+arg;
    var str = '<div class="log-item"><pre>'+timeStamp+'</pre><p>'+arg+'</p></div>'
    var logger= document.getElementById('logger');
        logger.innerHTML+= str;
}