Friday, April 21, 2023

Javascript OOP Classes are not real-- it is just syntactic sugar!

class MyBaseClass {
    constructor(thingOne, thingTwo) {
        this.thingOne = thingOne;
        this.thingTwo = thingTwo;
    }
    getThingOne() {
        return this.thingOne;
    }
    getThingTwo {
        return this.thingTwo;
    }
}

class MyExtendedClass extends MyBaseClass {
    constructor(thingOne, thingTwo, thingThree) {
        super(thingOne, thingTwo);
        this.thingThree = "thingThree"
    }

    getThingThree() {
        return this.thingThree;
    }
}

let theThings = new MyExtendedClass("foo", "bar", "baz");



This is the helper way to write the following:



function MyBaseClass (thingOne, thingTwo) {
    let newMyBaseClass = Object.create(myBaseClassConstructor);
    newMyBaseClass.thingOne = thingOne;
    newMyBaseClass.thingTwo = thingTwo;
    return newMyBaseClass;
}

let myBaseClassConstructor = {
    getThingOne: function() {
        return this.thingOne;
    },
    getThingTwo: function() {
        return this.thingTwo;
    }
}

function MyExtendedClass(thingOne, thingTwo, thingThree) {
    let newMyExtendedClass = MyBaseClass(thingOne, thingTwo);
    Object.setPrototypeOf(newMyExtendedClass, myExtendedClassConstructor);
    newMyExtendedClass.thingThree = thingThree;
    return newMyExtendedClass;
}

let myExtendedClassConstructor = {
    getThingThree: function() {
        return this.thingThree;
    }
}

Object.setPrototypeOf(myExtendedClassConstructor, myBaseClassConstructor);

const theSquare = MyBaseClass(2,3);
theSquareArea = theSquare.getThingOne() * theSquare.getThingTwo();

const theBox = MyExtendedClass(2, 3, 5);
theCubicVolume = theBox.getThingOne() * theBox.getThingTwo() * theBox.getThingThree();

No comments:

Post a Comment

Followers