Class-like behavior Javascript

Question

So I have this Javascript function (class):

function Test() {
    this.a = function() { return 'hello'; }
    this.b = function() { alert(this.a()); }
    window.onload = this.b;
}
test = new Test();

The code does not work, because the function this.b on window load becomes a global function (outside of the Test function/class) where this.a does not exist.

Something like this:

function Test() {
    this.a = function() { return 'hello'; }
    this.b = function() { alert(test.a()); } // changed this to test
    window.onload = this.b;
}
test = new Test();

does work, but it assumes I know which variable holds the Test function/class which loses the functionality of creating multiple classes.

What is the best solution to maintain this approach (using this pointers inside function/class) and get the wanted result?

possible duplicate of How to access the correct `this` / context inside a callback? -- especially see the part Common problem: Using object methods as callbacks / event handlers. — Felix Kling
– Felix Kling, Commented Jan 31, 2014 at 10:25

Niet the Dark Absol · Accepted Answer · 2014-01-31 10:26:13Z

5

Actually, it has nothing to do with scope and everything to do with context.

See, when an event handler is called, this is set to whatever element the event is bound to. In this case, this is window.

Try something like this:

function Test() {
    var self = this;
    self.a = function() {return 'hello';};
    self.b = function() {alert(self.a());};
    window.onload = self.b;
}

By "saving" the context to a variable self, you avoid context problems.

answered Jan 31, 2014 at 10:26

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

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

1 Comment

user616396 Over a year ago

All answers did the job, upvoted. Chose yours as answer for explaining the binding of this.

georg · Accepted Answer · 2014-01-31 10:35:21Z

3

Try

window.onload = this.b.bind(this)

When you write someObj.func in javascript, the resulting reference has no idea of someObj. Therefore, if you need the correct this in func, you have to provide it explicitly.

This can be done by closing this in the func's parent scope, as other answers suggest, but bind is more transparent in my opinion.

edited Jan 31, 2014 at 10:35

answered Jan 31, 2014 at 10:28

georg

216k57 gold badges324 silver badges401 bronze badges

3 Comments

Niet the Dark Absol Over a year ago

.bind() is not cross-browser, unfortunately.

markcial Over a year ago

@NiettheDarkAbsol this is why i didn't knew about that. but when it will be fully supported will be nice. Support table at the end of the page linked Mozilla docs about bind function

Felix Kling Over a year ago

@NiettheDarkAbsol: No, but there are polyfills available. Have a look at the MDN documentation.

markcial · Accepted Answer · 2014-01-31 10:37:48Z

3

in your code this refers to the local function function() { alert(this.a()); }, if you want to refer to the "class scope" you have to store a refence to the class :

function Test() {
    var localTest = this;
    this.a = function() { return 'hello'; }
    this.b = function() { alert(localTest.a()); }
    window.onload = this.b;
}
test = new Test();

edited Jan 31, 2014 at 10:37

answered Jan 31, 2014 at 10:25

markcial

9,3634 gold badges33 silver badges41 bronze badges

3 Comments

Felix Kling Over a year ago

I'm not 100% sure what you mean by "in your code this refers to the local function function() { alert(this.a()); }" (what refers to the function? Did you mean this?), but I think it's wrong.

markcial Over a year ago

the this refers to local context, not the class context, so when you call the function, the object calling the funcion has the this scope, so you have to store a reference to the outern class

Felix Kling Over a year ago

Yeah, that makes more sense (but you really should format this as code). But that's not what you have written in your answer. You wrote it so that it can be easily understood as that this refers to function() {...} (which would be wrong).

Collectives™ on Stack Overflow

Class-like behavior Javascript

3 Answers 3

1 Comment

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related