JSFiddle - React, Tailwind, and code Playground

by johnkpaul

JavaScript

Object.prototype.polyfillProperties = function(){
    var myObject = document.createElement('fake');
    document.body.appendChild(myObject);
    for(var x in this){
        if(this.hasOwnProperty(x)){
            myObject[x] = this[x];                   
        }            
    }
    myObject.addProperty = addProperty;
    return myObject;
}

var test = {
    firstName:"John",
    lastName:"Dyer"        
}.polyfillProperties();

test.addProperty('fullname',
    function() {
        return this.firstName + ' ' + this.lastName;
    },
    function(value) {
        var parts = value.split(' ');
        this.firstName = parts[0];
        this.lastName = (parts.length > 1) ? parts[1] : '';
    });
 
console.log(test.fullname); // returns 'John Dyer'



// Super amazing, cross browser property function, based on http://johndyer.name/native-browser-get-set-properties-in-javascript/
function addProperty(name, onGet, onSet) {
 var obj = this;
    // wrapper functions
    var
        oldValue = obj[name],
        getFn = function () {
            return onGet.apply(obj, [oldValue]);
        },
        setFn = function (newValue) {
            return oldValue = onSet.apply(obj, [newValue]);
        };
 
    // Modern browsers, IE9+, and IE8 (must be a DOM object),
    if (Object.defineProperty) {
 
        Object.defineProperty(obj, name, {
            get: getFn,
            set: setFn
        });
 
    // Older Mozilla
    } else if (obj.__defineGetter__) {
 
        obj.__defineGetter__(name, getFn);
        obj.__defineSetter__(name, setFn);
 
    // IE6-7
    // must be a real DOM object (to have attachEvent) and must be attached to document (for onpropertychange to fire)
    } else {
 
        var onPropertyChange = function (e) {
 
            if (event.propertyName == name) {
                // temporarily remove the event so it doesn't fire again and create a loop
                obj.detachEvent("onpropertychange", onPropertyChange);
 
                // get the...