JSFiddle - React, Tailwind, and code Playground

by ifandelse

JavaScript

// I'm cheating entirely because this object is made of primitives...cheating FTW
var person = {
    firstName: "Nicholas",
    lastName: "Cloud",
    city: "St. Louis"
}


var wrap = function(subject, target, memberName) {
    Object.defineProperty(target, memberName, {
        set: function(value) {
            // check if it's not a primitive and wrap it if so
            var oldValue = subject[memberName];
            subject[memberName] = value;
            $('body').append("<div>set | " + memberName + " | old: " + oldValue + " new: " + value + "</div>");
        },
        get: function() {
            $('body').append("<div>get | " + memberName + "</div>");
            return subject[memberName];
        },
        enumerable: true,
        configurable: true
    });
};

function createProxy(subject) {
    var member, target = {};
    // intentionally iterating the chain, not just owned
    for (member in subject) {
        wrap(subject, target, member);
    }
    return target;
}

var proxy = createProxy(person);

console.log(proxy.firstName + " " + proxy.lastName);

proxy.firstName = "Captain";
proxy.lastName = "Awesome";