JavaScript "This" Pointer Within Nested Function

Javascript this pointer within nested function

In JavaScript the this object is really based on how you make your function calls.

In general there are three ways to setup the this object:

  1. someThing.someFunction(arg1, arg2, argN)
  2. someFunction.call(someThing, arg1, arg2, argN)
  3. someFunction.apply(someThing, [arg1, arg2, argN])

In all of the above examples the this object will be someThing.
Calling a function without a leading parent object will generally get you the global object which in most browsers means the window object.

JavaScript this pointer in nested-functions

Quick and dirty solution

function base(param) {
this.attr1 = "azertyuiop";
this.attr2 = 123;
this.attr3 = param;
var self=this;
this.fct1 = function() {
console.log("azerty keyboard first row: "+self.attr1);
//Doesn't work
}
}

Javascript this pointer within nested function

In JavaScript the this object is really based on how you make your function calls.

In general there are three ways to setup the this object:

  1. someThing.someFunction(arg1, arg2, argN)
  2. someFunction.call(someThing, arg1, arg2, argN)
  3. someFunction.apply(someThing, [arg1, arg2, argN])

In all of the above examples the this object will be someThing.
Calling a function without a leading parent object will generally get you the global object which in most browsers means the window object.

Function context (this) in nested functions

You can call any function that is in scope with functionName(). Since you haven't called it on an object, it will be called in the context of the default object (window). (IIRC, it will be called in the context of undefined if you are in strict mode).

The default object for context has nothing to do with where a function is defined or what scope that function appears in. It is simply the default object.

If a function is a property of an object, you can call it as reference.to.object.function(), and it will be called in the context of object instead of the default object.

Other things that change the context are the new keyword and the apply, call, and bind methods.

cannot access 'this' in nested function

You are losing context in AJAX callback functions inside getTransactions and getCompanies too. Try this:

Rank.prototype.getTransactions = function(callback) {
Transaction.find({}, function(err, transactions) {
//blah blah blah
this.transaction = transactions;
callback();
}.bind(this));
};

Rank.prototype.getCompanies = function(callback) {
Company.find({}, function(err, comps) {
//blah blah blah
this.transaction = comps;
callback();
}.bind(this));
};

Nested functions & the this keyword in JavaScript

The this keyword always refers to the object that the containing function is a method of.

No. Unfortunately, it is not easy as that. The documentation of the this keyword at MDN gives a good overview. It is set to the object when the function is called as a method on it, but there are other possibilies. The default is that this is undefined when it is called without anything special, like you do with func1 and func2. For sloppy (non-strict) mode functions undefined (and null) are not used though, this does point to the global object (window in browsers) for them in that case - what you are observing.

But it could also point to fresh object instances when the function is called as a constructor (with the new keyword), or to an event target (like a DOM element) when used as a handler. Last, but not least, it could be set manually with call, apply or bind

this has nothing to do with nesting. Nesting function declarations/expressions only affects the scope ("privacy", availability) of variables. While the variable scope of a function never changes, the value of this can be different on every invocation - it is more like an extra argument.

Trying to build nest functions within nested functions

You can do that, but not with an object initializer expression.

var mem = {
Read() {
console.log("Hello from Read");
}
};
mem.Read.Global = function() {
console.log("Hello from Global");
};

mem.Read();
mem.Read.Global();

Javascript Calling a nested function from within itself

You can assign the function to a local variable within the execution scope

function outer() {
var inner;

inner = function () {
inner();
}
inner();
}


Related Topics



Leave a reply



Submit