How to assign a function to a object method in javascript?

Question

I'd like to 'proxy' (not sure if that's the term at all) a function inside a function object for easy calling.

Given the following code

function Soldier() {
    this.el = $("<div></div>").addClass('soldier');
    this.pos = this.el.position; // $(".soldier").position(), or so I thought
}

In the console:

s = new Soldier();
$("#gamemap").append(s.el); // Add the soldier to the game field
s.pos === s.el.position // this returns true
s.el.position() // Returns Object {top: 0, left: 0}
s.pos() // Returns 'undefined'

What am I doing wrong in this scenario and is there an easy way to achieve my goal (s.pos() to return the result of s.el.position()) ? I thought about s.pos = function() { return s.el.position(); } but looks a bit ugly and not apropriate. Also I'd like to add more similar functions and the library will become quite big to even load.

I think you have to bind this to your method explicitly. JavaScript is quirky in how it deals with that variable: s.pos = this.el.position.bind(this.el). — SwiftsNamesake
– SwiftsNamesake, Commented Jun 7, 2015 at 22:49

zlumer · Accepted Answer · 2015-06-08 01:17:48Z

2

When you're calling s.pos(), its this context is lost. You can simulate this behavior using call():

s.pos.call(s); // same as s.pos()
s.pos.call(s.el); // same as s.el.position()

This code is actually ok:

s.pos = function() { return s.el.position(); }

An alternative is using bind():

s.pos = s.el.position.bind(el);

You can use the prototype, that way the functions will not be created separately for every object:

Soldier.prototype.pos = function(){ return this.el.position(); }

edited Jun 8, 2015 at 1:17

answered Jun 7, 2015 at 22:52

zlumer

7,0521 gold badge27 silver badges25 bronze badges

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

1 Comment

Iskren Over a year ago

Thank you! Accepted answer due to being most extensive, easy to understand explanation and link to docs.

Bergi · Accepted Answer · 2015-06-07 22:50:40Z

1

I'd recommend to use the prototype:

Soldier.prototype.pos = function() { return this.el.position(); };

Not ugly at all, and quite performant actually.

If you want to directly assign it in the constructor, you'll need to notice that the this context of a s.pos() invocation would be wrong. You therefore would need to bind it:

    …
    this.pos = this.el.position.bind(this.el);

answered Jun 7, 2015 at 22:50

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

1 Comment

Iskren Over a year ago

Thanks, upvote for the performant solution as well as doc links.

GillesC · Accepted Answer · 2015-06-07 22:50:58Z

1

It's because the context of execution for position method has changed. If you bind the method to work inside the element context it will work.

JS Fiddle

function Soldier() {
    this.el = $("<div></div>").addClass('soldier');
    this.pos = this.el.position.bind(this.el); 
}

var s = new Soldier();
$("#gamemap").append(s.el); 
console.log(s.pos());

answered Jun 7, 2015 at 22:50

GillesC

10.9k3 gold badges42 silver badges55 bronze badges

1 Comment

Iskren Over a year ago

Thank you, upvote for fiddle, working code and explanation of the problem.

Collectives™ on Stack Overflow

How to assign a function to a object method in javascript?

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related