Programming on a Jerker PART 1: Crockford’s Classless JavaScript Objects or: How I am over “this” and I am ditching “new”

js_pic_low_rez

Warning: this is a post entirely for those Jerkers, I mean “Jerks”, who program
JavaScript at their Ikea desks.

I watched this Crockford JavaScript video, at 38:35, and saw something astoundingly brilliant yet simple and obvious.

function constructor(spec){
    let {member} = spec,
    {other}= other_constructor(spec),
    method = function () {
        // member, other, method
    };
    return Object.freeze({
        method,
        other
    })
 }

This is ES6 code, or ECMAScript 2015, which is not available in browsers yet. So it needs to be adapted for normal JavaScript use in browsers.

I looked for explanations and found this half-done gist. It took a while for me to understand it and yes it is definitely a JavaScript “Good Part”. Here is the best part; The code makes sense and is very easy to manipulate.

You will notice there are no uses of “this”, therefore no loss of “this” context. No “new” to be seen anywhere. The abomination “object.prototype.constructor” does not rear its ugly head either. Here is an example, and yes, in the later parts of this series a duck-billed platypus, a mammal, is gonna lay an egg.

The function newAnimal() is the Animal constructor, and newSnake() serves to construct Snake objects.

console.clear();
function newAnimal(specs) {
var members = Object.assign({}, specs);
var commonName = function () {
console.log('Common Name :', members.common_name);
};
reproductionSystem = function () {
console.log('Reproduction System: asexual');
};
return Object.freeze({
commonName: commonName,
reproductionSystem: reproductionSystem
});

}
function newSnake(specs){
var members = Object.assign({}, specs);
movesBy = function () {
console.log('Moves By: slithering');
};
var an_animal = newAnimal(members);
return Object.freeze({
commonName: an_animal.commonName,
reproductionSystem: an_animal.reproductionSystem,
movesBy: movesBy
});

}
var an_animal = newAnimal({common_name: 'Alf the animal'});
an_animal.commonName();
an_animal.reproductionSystem();
console.log('-');
var a_snake = newSnake({common_name: 'Snorky the snake'});
a_snake.commonName();
a_snake.reproductionSystem();
a_snake.movesBy();

The console output of the above code.

Common Name : Alf the animal
Reproduction System: asexual
-
Common Name : Snorky the snake
Reproduction System: asexual
Moves By: slithering

There are still a few things to be fixed with this implementation. For one, parent functions(Animal) cannot call child functions(Snake) yet. There are no default values/functions, no interface tests, nor any overriding. But everything looks and works as expected.

Note that IE needs a polyfill for Object.assign().

Part 1 2 3 4 5 6 7

Leave a Reply

Your email address will not be published.