How to access the instance when prototyping with constructor functions?

Question

I'm extending a constructor class' functionality via the prototype method, but I'm having trouble figuring out how to access the soon-to-be instance of the constructor class.

Lets say we have the following class:

Bla = function()
{
    this.a = 5;
}

Simple enough. Now, I will extend it with a very simple method...

Bla.prototype.f = function(){console.log("Abdf.")};

new Bla().f(); //Logs "Abdf as expected."

But, what if I wanted to access the a property (5)? Say I am trying to extend the constructor class like this:

Bla.prototype.f2 = function(b){return b * here_are_the_problems.a};

Apparently using this refers to something else. What should I use instead?

Huh, really? OK then, I messed up while trying out examples in the console, apparently. — corazza
– corazza, Commented Jun 16, 2012 at 19:59

user1106925 · Accepted Answer · 2012-06-16 19:58:59Z

2

Use this to refer to the object on which the method was called...

console.log(this.a);

There are several ways the value of this can be set. One is that it generally refers to the object on which the function was called if the function was called as a method of the object.

Bla = function()
{
    this.a = 5;
}


Bla.prototype.f = function(){console.log(this.a)};

var bla = new Bla();

bla.f(); //Logs 5

So you can see that since f was called as a method of the instance of Bla referenced by the bla variable, the value of this in f will be set to refer to that same object.

answered Jun 16, 2012 at 19:58

user1106925

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

5 Comments

Flambino Over a year ago

Special note: If you're using the object method as an event handler (and in other circumstances, but event handling is the most common situation), the method will usually be called in the element's context. I.e. in element.onclick = bla_instance.some_method;, the this keyword will actually refer to the element and not the bla_instance (same if you use jQuery to bind events).

user1106925 Over a year ago

@Flambino: Yes, though I wouldn't say it uses the element's "scope". Scope is a very separate issue from this, which refers to calling context. But yes, there's no binding of the calling context to the original object (unless you use Function.prototype.bind() to create one).

Flambino Over a year ago

you're right, I meant to write "context" - fixed my comment. And yes, .bind (or $.proxy if you're using jQuery in an older browser that doesn't support bind natively) is the fix. Should've mentioned that too, I suppose :-P

user1106925 Over a year ago

@Flambino: There are just too many aspects to the semantics of this. A person can say too little, and leave holes, or too much, and fall away from the original point. :)

Flambino Over a year ago

Yeah, explaining this can quickly go off the track. But I figured that event handling is a common source of context-confusion, so I thought I'd better mention it. Especially if the original question came about because of this.a seemingly not working right :)

uadnal · Accepted Answer · 2012-06-16 20:05:21Z

2

Use the this keyword to access any instance property or methods. this represents the instance. Since a is an instance property and prototype methods are instance methods, it is accessible in the prototype.

Bla = function() {
    this.a = 5;
};
Bla.prototype.foo = function () {
   console.log( this.a );
}

var x = new Bla;
x.foo(); // logs 5

However, if we add a method directly to Bla...

Bla.bar = function () {
   console.log( this.a ); // ERRORRRRR
}

Because bar is not an instance (prototype) method. In this case, it's a static method of Bla and doesn't have an instance and this refers to the function Bla.bar, in which case doesn't have a property a

edited Jun 16, 2012 at 20:05

answered Jun 16, 2012 at 19:59

uadnal

11.5k2 gold badges35 silver badges40 bronze badges

3 Comments

user1106925 Over a year ago

You should refer to a as a property of the object, not as a variable. Any actual variable in the Bla constructor will be not directly reachable from prototyped methods.

corazza Over a year ago

@Trevor, what is a "static method"?

uadnal Over a year ago

A static method is a method of a class that doesn't require an instance and doesn't have access to instance variables. You would typically write one of these to create an instance of the class or a method related to the class type.

Collectives™ on Stack Overflow

How to access the instance when prototyping with constructor functions?

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related