Categories
Software Development Web Development

What does prototypical Javascript look like?

Way back before modern times, like 10 years ago. Javascript had a much funkier way of defining objects. It was called prototypical inheritance. This is still how Javascript works, the classes, modules etc. were all recent additions to the language to make it easier to work with. It is not a very fun way to program because it is like looking at a GIANT JSON more than a class with methods.

So what did/does prototype inheritance look like? Well this…



function JsCollection() {
    this.jsObject = new Object();

}
JsCollection.prototype = {
    constructor: JsCollection,
    addNamedProperty: function (property, value) {
        // only add the property if it doesn't exist, return true if it was created
        //return false if it was not, to allow for testing before adding a new property
        var returnBool = false;
        if (!this.jsObject.hasOwnProperty(property)) {
            returnBool = true;
            this.jsObject[property] = value;
        }
        return returnBool;
    },
    getElementCount: function () {
        var elementCount = 0;
        //loop through the object and add to the count
        for (var elem in this.jsObject) {
            //only add to the value if it is part of collection
            //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects
            if(this.jsObject.hasOwnProperty(elem)){
                     elementCount++;
            }
           
        }
        return elementCount;
    },
    getElementValue: function (property) {
        var returnProp = null;

        if (this.jsObject.hasOwnProperty(property)) {

            returnProp = this.jsObject[property];
        }
        return returnProp;
    },
    removeNamedProperty: function (property) {

        if (this.jsObject.hasOwnProperty(property)) {
            delete this.jsObject[property];
        }
    },
    changePropertyValue: function (property, value) {

        if (this.jsObject.hasOwnProperty(property)) {
            this.jsObject[property] = value;
        }
    },
    getAllNamedProperties: function () {
        return this.jsObject;
    },
    namedPropertyExists: function (property) {
        var propExists = false;
        if (this.jsObject.hasOwnProperty(property)) {
            propExists = true;
        }
        return propExists;
    }
};

//var objProps = obj1.getAllNamedProperties();
// how to loop through object properties 
//for(var prop in objProps){
//    console.log("Property is " + prop + ' Property value is ' + objProps[prop]);
//}

As you can see this is an object with functions in old fashioned Javascript syntax. This was too confusing of a syntax for most people, plus you had to learn the inner workings of Javascript and how prototypical inheritance works.

I won’t try¬† to explain it here as it is pretty complicated to wrap your head around. Some videos may help better than an article.



Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.