Basic query on passing this to a function

Question

I am trying to understand JavaScript this better.

function foo() {
    console.log(this);
}
// normal function call
foo(); // `this` will refer to `window`

When I try to pass this to a function it throws an error.

function foo(this) {
    console.log(this);
}
foo(); //Uncaught SyntaxError: Unexpected token this(…) on chrome console.

When I try to pass a variable that points to window I get undefined.

var that = this;

function foo(that) {
    console.log(that):
}
foo(); // undefined chrome console.

I was expecting window object in last example as when I type that on console I get window object.

>>> that
window....

`foo();` is basically the same as `foo(undefined);`. That's why `that` is `undefined`. — Felix Kling, Mar 31 '16 at 04:37
Either do not pass `that` so that you will get `global that` or pass `that` — Rayon, Mar 31 '16 at 04:56

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

this context in JavaScript depends on how the function is being called. See What does "this" mean?.

this will refer to window
```
function foo() {
    console.log(this);
}
foo();
```
Here, foo is globally defined function and the call to foo() is like window.foo(), Thus this inside foo() refers to the window object.
Uncaught SyntaxError: Unexpected token this(…) on chrome console.
```
function foo(this) {
    console.log(this);
}
foo();
```
this is reserved keyword and cannot be used as identifier name. Also note that no parameter is passed to foo() when invoking the function.

undefined is logged in below code

var that = this; // Global that

function foo(that) { // Parameter `that`
    console.log(that); // <-- Use semicolon here
}
foo(); // `that` is not passed.

because that passed as parameter overshadows the global that. And as nothing is passed to foo(), undefined is logged.

score 1 · Answer 2 · answered Mar 31 '16 at 04:36

1

 var that = this;
 function foo(that){
   console.log(that):
 }
 foo();

foo() parameter is missing.

so function foo(that) will be undefined.

To make it work

 foo(that)

answered Mar 31 '16 at 04:36

Gibbs

21,904
13
74
138

score 0 · Answer 3 · answered Mar 31 '16 at 05:03

function foo(this) {
    console.log(this);
}
foo(); //Uncaught SyntaxError: Unexpected token this(…) on chrome console.

In this case, the value of this is not set by the call. Since the code is not in strict mode, the value of this must always be an object so it defaults to the global object.

function foo(this) {
    console.log(this);
}
foo(); //Uncaught SyntaxError: Unexpected token this(…) on chrome console.

In this case, define a foo function with parameters and then call this without any value. Inside the function, the value of this is not set by the call. Since the code is not in strict mode, the value of this must always be an object so it defaults to the global object.

var that = this;
function foo(that){
    console.log(that); //<-here is semicolon ';'
}
foo();  // undefined chrome console.

If you understand two cases mentioned above may understand what happens here. For more information Please take a look: mdn-js-this

score 0 · Answer 4 · answered Mar 31 '16 at 05:22

this refers to the current context of execution in Javascript. This context is something that Javascript keeps to itself and it is readonly. You can only read the variables available in that context. You cannot override it. When you do something like this:

function foo(this){
    console.log(this);
}
foo();

with the parameter this in the function, you are trying to overwrite the current context which is not allowed and hence you get the error.

And, when you run this code:

var that = this;
function foo(that){
    console.log(that):
}
foo();

you are not passing any parameter while calling the foo function and hence the value of that is undefined. Note that the earlier assignment of this to that is overwritten in this foo function context.

Refer this link and this to know more about execution context.

Basic query on passing this to a function

4 Answers4

Linked

Related