Assigning a Property to a Function Reference in JavaScript

Question

I have the following constructor:

function myObject(){
    this.age = 43;
    this.getAge = function(){
        return this.age;
    }
}

I create a new object with it

myInstance = new myObject();

Then assign the getAge method to a variable reference

myReference = myInstance.getAge;

this from the original constructor function now refers to myReference. I then add the following

myReference.age = 99;

But when I run myReference(), the browser returns undefined. I ran the following to debug

console.log(myReference)

And only see the getAge function; the age property is not present. Why is the myReference.age assignment not being applied?

@Sushanth-- in this case, the value of "myReference" is an object. It's the function "getAge". — Pointy
– Pointy, Commented Dec 20, 2013 at 23:02
@Pointy. Thanks for pointing it out.. I used the wrong wordings to phrase it — Sushanth --
– Sushanth --, Commented Dec 20, 2013 at 23:03

Pointy · Accepted Answer · 2013-12-21 00:41:24Z

3

When you run your "myReference" function, you're running it without any context. Therefore, in the function the value of this will either be the global context (window) or undefined.

If you do this:

console.log( myReference.call(myReference) );

you'd get 99. That's because you'd be explicitly telling the runtime system to call the function with this set to the function itself. You could also do this:

myReference.getAge = myReference;
console.log( myReference.getAge() );

That should also work. Of course, this is a fairly confusing way to do things, and it's not really idiomatic JavaScript. The thing to note is that this is determined by the way a function is called, not how the function is defined. Also, this generally has nothing to do with the function itself unless you do something to arrange that (and that's kind-of weird).

You could also use .bind to create a bound version of the "getAge" function. If you want a function bound to the instance (which I think makes sense), you'd do this:

var myReference = myInstance.getAge.bind( myInstance );

Now setting the "age" property on "myReference" won't affect the property on the instance:

myReference.age = 99;
console.log( myReference() ); // logs 49

But setting the property on the instance will:

myInstance.age = 99;
console.log( myReference() ); // logs 99

edited Dec 21, 2013 at 0:41

answered Dec 20, 2013 at 23:03

Pointy

415k62 gold badges600 silver badges631 bronze badges

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

3 Comments

Lloyd Banks Over a year ago

Thanks, anyway to incorporate the native JS bind function with this instead of using the call method so as not to execute myReference immediately?

Pointy Over a year ago

@LloydBanks I'm not sure I completely understand your question but I'll add a paragraph about bind.

Lloyd Banks Over a year ago

I was actually a bit more interested as to whether I could bind in the following fashion: myReference = myInstance.getAge.bind(myReference);, effectively changing this to reference myReference. I played around with the above, but get a myReference is not defined error.

Collectives™ on Stack Overflow

Assigning a Property to a Function Reference in JavaScript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related