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
– Oriol, Commented Dec 11, 2014 at 1:29
In the first one, where it says obj.move = move; is that supposed to be this instead of obj? — Pointy
– Pointy, Commented Dec 11, 2014 at 1:31
@Barmar, I believe you are right. Made the correction. Thank you. — KishB87
– KishB87, Commented Dec 11, 2014 at 1:46

Community · Accepted Answer · 2017-05-23 11:50:56Z

1

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;
}

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Dec 11, 2014 at 1:38

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

This vs Defining Object in Function Argument in Javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related