JSFiddle - React, Tailwind, and code Playground

by bittersweetryan

JavaScript

//create a generic person object
var person = {
    firstName : "Aaron", //public
    lastName : "Rodgers", //public
    
    getThis : function(){
        console.log(this);
    },
    createName : function(){
        //jquery is availbe directly inside this object
        //variable properties of this object need to be accessed
        //through the this keyword
        var nameDiv = $("<div>" + this.firstName  + "</div>");
        console.log(nameDiv);
        //accessing a property w/o the this keyword should be an error
    }
};

//call a function that uses jquery
person.createName();

//now create a person varialble using the module pattern
var person = (function(){
    var firstName = "Greg";
    var lastName = "Jennings";
    
    var that = this;
    
    var hello= $("<div>Hello</div>");
    return {
        getFirstName : function(){
            console.log(that.firstName); //undefined becuase this referes to the return object literal//
            console.log(firstName);
        },
        createName : function(){
            var nameDiv = $("<div>" + firstName  + "</div>");
            console.log(nameDiv);
        }
    };
}());

person.getFirstName();
person.createName();
    
//lastly lets create a person using constructor pattern
function Person(firstName,lastName){
    this.firstName = firstName;
    this.lastName = lastName;
    
    this.getFirstName = function(){
        console.log(this.firstName);
    };
};

var newPerson= new Person("Charles","Woodson");

newPerson.getFirstName();