JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>

JavaScript

var GameObject = {
    // init and other methods can be defined here
};

GameObject.prototype = {
    color: undefined, // undefined properties will be removed by jQuery.extend
    canKill: undefined,
    width: undefined,
    speed: 5,
    weaponType: undefined
};

/*
//
// pure javascript extending
// not working properly, extending of defined values is not working
// e.g. speed=5 won't be in the extended object.
Object.prototype.extend = function (obj) {
    // source from this SO question: http://stackoverflow.com/questions/10430279/javascript-object-extending
    for (var i in obj) {
        //console.log(i, obj[i]);
        if (obj.hasOwnProperty(i)) {
            this[i] = obj[i];
        }
    }
};

var ob1 = Object.create(GameObject);
ob1.extend({
    color: 'red',
    canKill: 'yes'
});

var ob2 = Object.create(GameObject);
ob2.extend({
    color: 'green',
    canKill: 'no',
    speed: 10
});
*/

/*
// with underscore.defaults
var ob1 = _.defaults(Object.create(GameObject), {
    color: 'red',
    canKill: 'yes'
});

var ob2 = _.defaults(Object.create(GameObject), {
    color: 'green',
    canKill: 'no',
    speed: 10
});
*/


// with jQuery.extend(...)
var ob1 = $.extend(true, {}, Object.create(GameObject.prototype), { 
    // true = deep copy, new GameObject = target, source object
    color: 'red',
    canKill: 'yes'
});

var ob2 = $.extend(true, {}, Object.create(GameObject.prototype), {
    color: 'green',
    canKill: 'no',
    speed: 10
});


//console.log(ob1.prototype);
console.log(ob1, ob1.color, ob1.canKill, ob1.speed);
//console.log('default speed', ob1.prototype.speed);
console.log(ob2, ob2.color, ob2.canKill, ob2.speed);

console.log('same prototype for GameObject and ob2? yes = true -->', GameObject.prototype === ob2.prototype ); // that's OK, no prototype needed.
console.log('same object GameObject === ob2? no = false -->', GameObject === ob2 );