JSFiddle - React, Tailwind, and code Playground

by mslocum

HTML

<ol>
    <li>Click Say Hi</li>
    <li>Type a name and click SetName</li>
    <li>Click Say Hi again<br/>
        Notice that 'this' is different depending on who is calling it.
    </li>
</ol>

<button id="sayHi">Say Hi</button>
<br/>
<input id="name" type="text" />
<button id="setName">Set Name</button>

<br/><br/>
<button id="sayHelloWorld">Say Hello World</button>

JavaScript

var Api = function() {
    this.name = "somebody";
};

Api.prototype = jQuery.extend(Api.prototype, function(){
    var oProto = {};
    
    oProto.sayHi = function(name) {
        this.name = name || this.name;
        alert('Hello ' + this.name);
    }
    
    oProto.setName = function(name) {
        this.name = name;
    }
    
    return oProto;
}());

var api = new Api();

jQuery(function($) {
    $('#sayHelloWorld').click(function() {
        api.sayHi('world');
    });
    $('#setName').click(function() {
        api.setName($('#name').val());
    });
    $('#sayHi').click(function() {
        api.sayHi();
    });
});