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:
someThing.someFunction(arg1, arg2, argN)
someFunction.call(someThing, arg1, arg2, argN)
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:
someThing.someFunction(arg1, arg2, argN)
someFunction.call(someThing, arg1, arg2, argN)
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
Iterate Through Nested JavaScript Objects
Convert Column Index into Corresponding Column Letter
How to Get a Word Under Cursor Using JavaScript
Getelementsbyclassname() Doesn't Work in Old Internet Explorers Like IE6, IE7, IE8
Why Do Results Vary Based on Curly Brace Placement
How to Solve Uncaught Rangeerror When Download Large Size JSON
How to Detect a Long Touch Pressure with JavaScript for Android and Iphone
JavaScript Marquee to Replace <Marquee> Tags
Putting HTML Inside an Iframe (Using JavaScript)
How to Download a File Using Window.Fetch
How to Listen to the Form Submit Event in JavaScript
Using Settimeout on Promise Chain
How to Fix Navigator/Window/Document Is Undefined in Nuxt
How to Update an "Array of Objects" with Firestore
Loading an Image to a <Img> from <Input File>