Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

this value in JavaScript anonymous function

Can anybody explain to me why A is true and B is false? I would have expected B to be true as well.

function MyObject() {  };  MyObject.prototype.test = function () {     console.log("A", this instanceof MyObject);     (function () {         console.log("B", this instanceof MyObject);     }()); }  new MyObject().test(); 

update: since ecmascript-6 you can use arrow functions which would make it easy to refer to MyObject like this:

function MyObject() {  };  MyObject.prototype.test = function () {     console.log("A", this instanceof MyObject);     (() => {//a change is here, which will have the effect of the next line resulting in true         console.log("B", this instanceof MyObject);     })(); //and here is a change }  new MyObject().test();     
like image 371
Corno Avatar asked Dec 29 '11 17:12

Corno


People also ask

What is the anonymous function in JavaScript?

In JavaScript, an anonymous function is that type of function that has no name or we can say which is without any name. When we create an anonymous function, it is declared without any identifier. It is the difference between a normal function and an anonymous function.

Can we assign anonymous function in JavaScript?

An anonymous function in javascript is not accessible after its initial creation. Therefore, we need to assign it to a variable, so that we can use its value later. They are always invoked (called) using the variable name. Also, we create anonymous functions in JavaScript, where we want to use functions as values.

Which of the following is an example of an anonymous function in JavaScript?

function hello() { alert('Hello world'); } hello(); Anonymous function definition: var anon = function() { alert('I am anonymous'); } anon();

Can anonymous function return JavaScript?

No, you cannot return a value from an asynchronous callback. Event callback will be called on click, but you can't assign its result.


2 Answers

Inside of your anonymous function this is the global object.

Inside of test, this is the instance of MyObject on which the method was invoked.


Whenever you call a function like this:

somceFunction(); // called function invocation 

this is always the global object, or undefined in strict mode (unless someFunction was created with bind** — see below)

Whenever you call a function like this

foo.someMethod();  //called method invocation 

this is set to foo


**EcmaScript5 defines a bind function that allows you to create a function that has a pre-set value for this

So this

    var obj = { a: 12 };     var someFunction = (function () { alert(this.a); }).bind(obj);     someFunction(); 

Causes someFucntion to be invoked with this equal to obj, and alerts 12. I bring this up only to note that this is a potential exception to the rule I mentioned about functions invoked as

someFunction(); 

always having this equal to the global object (or undefined in strict mode)

like image 177
Adam Rackis Avatar answered Sep 21 '22 03:09

Adam Rackis


this is special. It refers to the object that the function is being called on behalf of (most commonly via dot syntax).

So, in the case of A, the function is being called on behalf of a new MyObject object. B is in a different function that isn't explicitly being called on behalf of any object, so this defaults to the global object (window).

In other words, this changes depending on how the function is called, not where or how it is defined. The fact that you're using an anonymous function (defined inside another function) is coincidental and has no effect on the value of this.

like image 21
Cameron Avatar answered Sep 24 '22 03:09

Cameron