"this" contextual output is not able to understand

Question

I find it hard to understand the code below.

function foo() { console.log( this.a ); } var obj = { a: 2, foo: foo }; var a = 4; obj.foo(); setTimeout( obj.foo, 100 ); setTimeout( obj.foo.bind(obj), 100 ); 

His conclusion is obtained as 2, 4, 2, which I cannot understand.

Answer 1

First case

 obj.foo(); 

Where this inside foo will indicate obj , since you assigned the function as a property of this particular object.

Second case

 setTimeout( obj.foo, 100 ); 

In setTimeout, the function passed will be eval uated in the window context. So here var a = 4; was executed in the context of a window and became a property of the window. when accessing this inside a foo function that points to window in this particular situation.

Third case

 setTimeout( obj.foo.bind(obj), 100 ); 

You just bound obj like this to the foo function. And although the function evaluated in the context of the window, the bound this value will not be changed. This is the rule behind the bind function. Thus, this here will not be changed from obj to window .

Answer 2

this keyword behaves somewhat differently in the context of the difference.

Global context

In the global execution context (outside of any function), this refers to the global object, whether in strict mode or not.

Functional context

Inside a function, the meaning of this depends on how the function is called.

Simple challenge

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

In non-line mode, this will default to a global object.

In strict mode, this will default to undefined.

call or apply

 function foo() { console.log(this) } var o = {'name': 'test object'}; foo.call(o) // log object `o` 

this can be bound to a specific object in a call using call or apply methods.

bind

bind method returns a function that uses the special bind object as the this object in the function.

 function foo() { console.log(this) } var o = {'name': 'test object'}; bar = foo.bind(o) bar() // log object `o` 

Refer to this link for more information: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this

To explain

in this case obj.foo(); this foo function is obj , so this.a refers to obj.a

in this case setTimeout( obj.foo, 100 ); obj.too is a reference to the foo function. setTimeout will execute it in a global context.

in this case setTimeout( obj.foo.bind(obj), 100 ); , obj.foo.bind(obj) returns a reference to a function that associates this with obj . setTimeout will execute it in obj context

Answer 3

You need to understand how this behaves. It is called a function execution context, and you can learn more about it here .

In the first case, the function is called in the context of the obj object, since the accessor property is used . ( obj.foo ) and therefore this points to obj .

In the second case, you pass an autonomous function to setTimeout , and it will be called in the global context, this , pointing to the window. obj.foo() does not match var f = obj.foo; f() var f = obj.foo; f()

In the third case, you associate the context of the function call with obj , and this again points to obj. Read more about bind here .

Answer 4

Try the alert(this); method alert(this); inside foo () to understand the context.

obj.foo(); => works in the context of the object, and so the result will be the value of a inside obj => 2

setTimeout( obj.foo, 100 ); => works in the context of the window and var a = 4 is in the context of the window, this.a gives 4 ( this is window here)

and in the last line will again be the context of the object => 2