This vs Defining Object in Function Argument in Javascript

Question

Below you will find two different decorator patterns. One uses "this" while the other one defines the object in the function arguments.

What is the advantage of defining the object vs using "this" from a memory/performance perspective? When is it appropriate to use this rather then defining the object?

//Using this in the object
    var carlike = function(loc) {
                this.loc = loc;
                var move = function() {
                    this.loc++;
                };
                this.move = move;
                return this;
            };

//Defining the object in the arguments
    var carlike = function(obj, loc) {
                obj.loc = loc;
                var move = function(obj) {
                    obj.loc++;
                };
                obj.move = move;
                return obj;
            };

Since `carlike` isn't a method, you need something like `carlike.call(obj, loc)` to set the value of `this`. Then, `carlike(obj, loc)` is probably a better approach in this case. — Oriol, Dec 11 '14 at 01:29
In the first one, where it says `obj.move = move;` is that supposed to be `this` instead of `obj`? — Pointy, Dec 11 '14 at 01:31
@Barmar, I believe you are right. Made the correction. Thank you. — KishB87, Dec 11 '14 at 01:46

score 1 · Accepted Answer · edited May 23 '17 at 11:50

For the carlike function, there is no performance difference. However, as you say it is a decorator - which would be called as a static function on an object - not a constructor or method. You would want to use carlike({}, 0) instead of carlike.call({}, 0), so go with the second pattern.

For the move function, there is a memory difference. The pattern with obj creates a closure, which costs more than the this in the first pattern. Which one to choose is a different question, as they simply act different.

If you would want to optimize memory consumption, you could further improve the first pattern by not creating new move functions on every invocation of carlike. Just do

function move() {
    this.loc++;
}
function carlike(obj, loc) {
    obj.loc = loc;
    obj.move = move;
    return obj;
}

This vs Defining Object in Function Argument in Javascript

1 Answers1