Question

So I’m trying my hand at JavaScript “classes” to try and clarify and simplify some of my code. What I have is something like this:

function action (name, vActor, vTarget) {
    this.name = name;
    this.vActor = vActor;
    this.vTarget = vTarget;
    this.addRoll = addRoll;
    this.children = {};
}
function addRoll (name, diffMod, dice, success, critSuccess, failure) {
    this.children[name] = {} ;
    this.children[name].diffMod = diffMod;
    this.children[name].dice = dice;
    this.children[name].success =       {condition: success,        outcome: {}};
    this.children[name].critSuccess =   {condition: critSuccess,    outcome: {}};
    this.children[name].failure =       {condition: failure,        outcome: {}};
    this.children[name].addSuccess = addSuccess;
    this.children[name].addFailure = addFailure;
    this.children[name].addOutcome = addOutcome;
}

Is this the right way to go about this? My main question is regarding who owns the “this” object in the “function addRoll()” section. I’m assuming that “this” still belongs to the action ‘class’. I also am uncertain of the syntax regarding starting a new blank object and assigning stuff using dot notation. Thanks in advance.

Answer 1

Ignoring function binding and calling apply or call, the this property is the owner of the method. Calling…

addRole(...)

The this property points to the global window object. If you had an object {} or instance new Something() called x with the function addRole and called it…

x.addRole(...)

The this property is x.

Additional You have correctly assigned the function to the action object so when you call…

var a = new action(...);

And then call

a.addRole(...);

The this property is the a instance of action you have created. To prevent it being called as a global function and adding properties to the window you could assign it to a prototype. The prototype object has some powerful features to build inheritance but for now simply changing…

addRole(...) {...}

To the following…

action.prototype.addRole = function(...) {...}

And removing the assignment in action…

this.addRole = addRole

Will prevent the function accidentally being called without an owner

Further You could rewrite the way you assign the children in addRole to make greater use of object literal notation…

function addRoll(name, diffMod, dice, success, critSuccess, failure) {
    this.children[name] = {
        diffMod: diffMod,
        dice: dice,
        success: {
            condition: success,
            outcome: {}
        },
        critSuccess: {
            condition: critSuccess,
            outcome: {}
        },
        failure: {
            condition: failure,
            outcome: {}
        },
        addSuccess: addSuccess,
        addFailure: addFailure,
        addOutcome: addOutcome
    };
}

You could also refactor the code to use classes for the children as follows.

function Action(name, vActor, vTarget) {
    this.name = name;
    this.vActor = vActor;
    this.vTarget = vTarget;
    this.children = {};
}
Action.prototype.addRoll = function(name, role) {
    this.children[name] = role;
}

function Role(diffMod, dice, success, critSuccess, failure) {
    this.diffMod = diffMod;
    this.dice = dice;
    this.success = success;
    this.critSuccess = critSuccess;
    this.failure = failure;
}
Role.prototype.addSuccess = function(...) {...}
Role.prototype.addFailure = function(...) {...}
Role.prototype.addOutcome = function(...) {...}

function Condition(condition) {
    this.condition = condition;
    this.outcome = {};
}