Assigning 'this' to a variable in Javascript

Question

I'm taking an object oriented approach with Javascript, for two reasons. One, because it helps me learn, and two, just in case my code is to be distributed.

I already have assigning functions to variables and using this for public variables. I'm running into problems using this, however. When I'm in a "private" function, this refers to a different scope, and I can't access the variables under this. I'll illustrate my point.

var ClassObject = function() {
  this.var1 = 'Hello';

  var var2 = 786;

  this.func1 = function() {
    alert(this.var1); // Alerts Hello
    alert(var2); // Alerts 786
  }

  var func2 = function() {
    alert(this.var1); // Alerts undefined
    alert(var2); // Alerts 786
  }
}

The only way I've found to give func2 access to this.var1 was to make another variable assigned to this: var c = this. Is this the best way to go about this task, or even widely acceptable? Can anybody offer a better solution?

Thank you all.

Short answer: yes, this is perfectly acceptable. I've seen the variable `self` used for that purpose: `var self = this;` — Casey Chu, Aug 08 '12 at 05:10

score 10 · Accepted Answer · edited May 23 '17 at 12:17

10

Yes, this is accepted practice. See this article on scope or this question.

Reading up on closure may also be helpful.

edited May 23 '17 at 12:17

Community

1
1

answered Aug 08 '12 at 05:18

Scotty

2,480
2
16
20

Your links were very helpful. Thank you. – Matt Mancuso Aug 08 '12 at 05:46
The blog post has been moved to https://www.jackfranklin.co.uk/blog/javascript-variable-scope-this/ – Maduka Jayalath Feb 28 '23 at 16:13
Another thing to note is that `this` works differently with arrow functions. look at the explanation: https://www.w3schools.com/js/js_arrow_function.asp – Maduka Jayalath Feb 28 '23 at 17:21

jfriend00 · Answer 2 · 2012-08-08T05:55:09.493

The value of this is set by the javascript interpreter on every single function call including when calling your private functions. The rules are fairly simple:

If calling object.method(), then this is set to the object inside the method.
If calling a normal function (whether global or local) like fn(), this is set to the global object (which is usually window in a browser).
When using .apply() or .call(), this is set to the first argument to those functions (e.g. you can control what it is set to by what you pass to .apply() or .call().

Thus, when you call your private functions, you're getting option 2. If you want access to the this of your object, you have these three options:

Make those private functions methods (they will no longer be private then) and invoke them as methods like this.func2() so the javascript interpreter sets this for you.
Use .call() or .apply() like func2.call(this) to instruct the interpreter to set this as you desire.
Store the value of this in a local variable before calling func1() with something like var self = this so you can refer to self inside func1() via the closure. This is done quite commonly in javascript (takes advantage of how closures allow access to parent scope variables).

I haven't yet looked into `.call()` or `.apply()`, but I will now. Thank you. — Matt Mancuso, Aug 08 '12 at 05:45

score 0 · Answer 3 · answered Aug 08 '12 at 05:12

0

You can't do what you want to unless you do use something like setting it to another variable. So either restructure everything so you dont have to do it, or just use the variable. I'd say it's acceptable to use the variable

answered Aug 08 '12 at 05:12

Tom Prats

7,364
9
47
77

Well, that was quick and easy. Thank you all, @Casey and TMP, and everyone else. – Matt Mancuso Aug 08 '12 at 05:22

Assigning 'this' to a variable in Javascript

3 Answers3