I know that this keyword always refers to the this of the current scope, which changes any time you wrap something in function() { ... }. My question is, why do I have access to the outer scope variable x in the function inside the setTimeout function?
var x = 45;
function getRecipe(recipe) {
x = 35;
return {
displayRecipe: function(a) {
//here we have access to x=35
setTimeout(function() {
//why do we have access to x=35 and to recipe here?
console.log(this.x + a + recipe);
}, 1500)
}
}
}
getRecipe("noodles").displayRecipe(2);
When not in strict mode, and when the this is not set by the call, this inside functions will default to the global object (window in browsers).
function f1() {
return this;
}
console.log(f1() === window); // true
Also in browsers when not in strict mode, global variables (variables declared in the global scope) declared with var are also created as members of the global object.
var foo = "foobar";
console.log(foo === window.foo);
Because your x is declared as a global variable, it is also added as a member of the window object. Because your setTimeout callback does not explicitly set the this scope, it also defaults to the global object, and so it is possible you can access x via this.
If x would not have been declared in the global scope (or would've been declared in strict mode or with a let/const statement), you would not be able to access it:
(function() {
var x = 45;
function getRecipe(recipe) {
x = 35;
return {
displayRecipe: function(a) {
//here we have access to x=35
setTimeout(function() {
//why do we have access to x=35 and to recipe here?
console.log(this.x, a, recipe);
}, 1500)
}
}
}
getRecipe("noodles").displayRecipe(2);
})();
You should put let before x=35
var x=45;
function getRecipe(recipe){
let x=35;
return{
displayRecipe: function(a){
//here we have access to x=35
setTimeout(function(){
//why do we have access to x=35 and to recipe here?
console.log(this.x + a + recipe );
},1500)
}
}
}
getRecipe("noodles").displayRecipe(2);
Related
Within Js Functions, a variable can be defined but from console that variable doesn't exist is there anyway to access or edit it?
Example:(This code would be in the website)
function whatever () {
var x = 10
}
then in console if you type
x
it will say 'undefined'
x is limited to the scope of its function. If you want to reference it outside of the function, you can either declare it outside the function:
var x = 10
function whatever () {
// ...
}
Or you can make it a global variable by declaring it with the window object:
function whatever () {
window.x = 10
}
whatever()
console.log(x)
What you're talking about is called scope. From Mozilla's docs:
function exampleFunction() {
var x = "declared inside function"; // x can only be used in exampleFunction
console.log("Inside function");
console.log(x);
}
console.log(x); // Causes error
However:
var x = "declared outside function";
exampleFunction();
function exampleFunction() {
console.log("Inside function");
console.log(x);
x = "something else";
}
console.log("Outside function");
console.log(x);
In other words, declaring variables outside the function allow access, and you can change them from within.
Alternatively, building on their example, you can use a return value in the function to assign a variable its value.
function exampleFunction() {
return "Inside function";
}
const x = exampleFunction();
console.log(x);
I have a question concerning how the "this" pointer is treated in a nested function scenario.
Say I insert this following sample code into a web page. I get an error when I call the nested function "doSomeEffects()". I checked in Firebug and it indicates that when I am in that nested function, the "this" pointer is actually pointing to the global "window" object - which I did not expect. I must not be understanding something correctly because I thought since I declared the nested function within a function of the object, it should have "local" scope in relation to the function (i.e. the "this" pointer would be referring to the object itself like how it is in my first "if" statement).
Any pointers (no pun intended) would be appreciated.
var std_obj = {
options : { rows: 0, cols: 0 },
activeEffect : "none",
displayMe : function() {
// the 'this' pointer is referring to the std_obj
if (this.activeEffect=="fade") { }
var doSomeEffects = function() {
// the 'this' pointer is referring to the window obj, why?
if (this.activeEffect=="fade") { }
}
doSomeEffects();
}
};
std_obj.displayMe();
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.
Since this appears to be among the most upvoted questions of its kind, let me add, after all these years, the ES6 solution using arrow functions:
var std_obj = {
...
displayMe() {
...
var doSomeEffects = () => {
^^^^^^^ ARROW FUNCTION
// In an arrow function, the 'this' pointer is interpreted lexically,
// so it will refer to the object as desired.
if (this.activeEffect=="fade") { }
};
...
}
};
this is not part of the closure scope, it can be thought of as an additional parameter to the function that is bound at the call site. If the method is not called as a method then the global object is passed as this. In the browser, the global object is identical to window. For example, consider the following funciton,
function someFunction() {
}
and the following object,
var obj = { someFunction: someFunction };
If you call the function using method syntax such as,
obj.someFunciton();
then this is bound to obj.
If you call someFunction() directly, such as,
someFunction();
then this is bound to the global object, that is window.
The most common work around is to capture this into the closure such as,
displayMe : function() {
// the 'this' pointer is referring to the std_obj
if (this.activeEffect=="fade") { }
var that = this;
var doSomeEffects = function() {
// the 'this' pointer is referring to global
// that, however, refers to the outscope this
if (that.activeEffect=="fade") { }
}
doSomeEffects();
}
To understand this question , try to get the output for the following snippet
var myObject = {
foo: "bar",
func: function() {
var self = this;
console.log("outer func: this.foo = " + this.foo);
console.log("outer func: self.foo = " + self.foo);
(function() {
console.log("inner func: this.foo = " + this.foo);
console.log("inner func: self.foo = " + self.foo);
}());
}
};
myObject.func();
The above code will output the following to the console:
outer func: this.foo = bar
outer func: self.foo = bar
inner func: this.foo = undefined
inner func: self.foo = bar
In the outer function, both this and self refer to myObject and therefore both can properly reference and access foo.
In the inner function, though, this no longer refers to myObject. As a result, this.foo is undefined in the inner function, whereas the reference to the local variable self remains in scope and is accessible there. (Prior to ECMA 5, this in the inner function would refer to the global window object; whereas, as of ECMA 5, this in the inner function would be undefined.)
There's a difference between enclosure variables and "this". "this" is actually defined by the invoker of the function, while explicit variables remain intact inside the function declaration block known as the enclosure. See the example below:
function myFirstObject(){
var _this = this;
this.name = "myFirstObject";
this.getName = function(){
console.log("_this.name = " + _this.name + " this.name = " + this.name);
}
}
function mySecondObject(){
var _this = this;
this.name = "mySecondObject";
var firstObject = new myFirstObject();
this.getName = firstObject.getName
}
var secondObject = new mySecondObject();
secondObject.getName();
you can try it out here:
http://jsfiddle.net/kSTBy/
What's happening in your function is "doSomeEffects()", is being called explicitly, this means context or the "this" of the function is the window. if "doSomeEffects" was a prototype method e.g. this.doSomeEffects on say "myObject", then myObject.doSomeEffects() would cause "this" to be "myObject".
As explained by Kyle, you could use call or apply to specify this within the function:
Here is that concept applied to your code:
var std_obj = {
options: {
rows: 0,
cols: 0
},
activeEffect: "none",
displayMe: function() {
// the 'this' pointer is referring to the std_obj
if (this.activeEffect == "fade") {}
var doSomeEffects = function() {
// the 'this' pointer is referring to the window obj, why?
if (this.activeEffect == "fade") {}
}
doSomeEffects.apply(this,[]);
}
};
std_obj.displayMe();
JsFiddle
Since it wasn't mentioned I will mention that using .bind() is a solution -
doSomeEffects=doSomeEffect.bind(this);
doSomeEffects();
}
};
std_obj.displayMe();
Here is a more simple example -
bad = {
name:'NAME',
z : function() {
function x() { console.log(this.name); };
x()
}
};
bad.z() // prints 'undefined'
good = {
name:'NAME',
z : function() {
function x() { console.log(this.name); };
x=x.bind(this);
x();
}
};
good.z() // prints 'NAME'
It is true that using an arrow function => looks slicker and is easy for the programmer. However, it should be kept in mind that a lexical scope is likely to require more work in terms of processing and memory to setup and maintain that lexical scope, compared to simply associating a function's this with a pointer via .bind().
Part of the benefit of developing classes in JS was to provide a method to make this more reliably present and available, to pivot away from functional programming and lexical scopes, and thus reduce overhead.
From MDN
Performance considerations
It is unwise to unnecessarily create functions within other functions if closures are not needed for a particular task, as it will negatively affect script performance both in terms of processing speed and memory consumption.
It's because "this" refers to the self object / local function.
var std_obj = {
options : { rows: 0, cols: 0 },
activeEffect : "none",
displayMe : function() {
if (this.activeEffect=="fade") { }
let This = this; // 'this' here is for the std_obj scope. Create a reference to 'this' if you want to use it elsewhere.
var doSomeEffects = function() {
// 'this' here refers to the doSomeEffects scope. If you don't want "this," you can still use "this" of the std_obj scope.
if (This.activeEffect=="fade") { }
}
doSomeEffects();
}
};
std_obj.displayMe();
I also got a warning "Potentially invalid reference access to a class field via this"
class MyListItem {
constructor(labelPrm) {
this._flagActive = false;
this._myLabel = labelPrm;
labelPrm.addEventListener('click', ()=>{ this.onDropdownListsElementClick();}, false);
}
get myLabel() {
return this._myLabel
}
get flagActive(){
return this._flagActive;
}
onDropdownListsElementClick(){console.log("Now'this'refers to the MyListItem itself")}}//end of the class
Can someone explains the scope binding of the following code please
window.name = "window";
object = {
name: "object",
method: function() {
nestedMethod: function() {
console.log(this.name);
}
nestedMethod();
}
}
object.method(); // print 'window'
I think my question is more about this...why is this losing the scope and default to the global scope ? do all the anonymous functions that we created will go on the global scope ?
Whenever you call a function, simply by writing func(), this inside the function will point to the global object. In your case you write:
nestedMethod();
So this inside nestedMethod is the window object. You can use call (or apply) to manually define a context for you function call:
nestedMethod.call(this);
Any function that's invoked like this:
someFunction();
will have the global scope as the value of this (in non-strict mode). You can either stash the outer scope in a local variable, or else use .call() or .apply():
nestedMethod.call(this);
window.name = "window";
object = {
name: "object",
method: function () {
var self = this;
var nestedMethod = function () {
console.log(self.name); // or object.name without declaring self
}
nestedMethod();
}
}
object.method(); // print 'object'
Save the scope of the object - or use the object itself!
do all the anonymous functions that we created will go on the global scope ?
No, not all the anonymous functions lose their scope, all the functions scopes are bound to the global object(if they are not called with specific this, see apply and call, see the example below)!
window.name = "window";
object = {
name: "object",
method: function () {
var nestedMethod = function () {
console.log(this.name);
}
nestedMethod.call(this); //change the this arg in the current object scope
// when you call this function with .call(this) you are changing the value of the nestedMethod's this to the current this, which is object
}
}
object.method(); // print 'object'
you should declare nested function like this:
Super.prototype.someFunc = function() {
this.nestedFunc = function() {}
//now call it
this.nestedFunc()
}
I have an object litrel that has 2 anonymous functions defined as such:
obj = {
funcA : function(){
var a = 'a';
},
funcB : function(){
// but how do you access the scope in 'funcA' to access variable 'a'?
console.log(a)
}
}
I do not want to pass any variables just the scope of 'funcA' - thoughts?
JavaScript scope doesn't work like that because it has (only) function scope (except when using the let keyword).
What you could do is...
obj = {
a: 0,
funcA: function() {
this.a = 'a';
},
funcB: function() {
console.log(this.a);
}
};
jsFiddle.
You can use the a closure with the module pattern to get access to variables in an outer scope. More than one function can accesses the variable:
var obj = (function() {
var a;
return {
setA: function(value) {
a = value;
return a;
},
getA: function(value) {
return a;
},
multiplyA: function(value) {
a = a * value;
return a;
}
};
}());
alert( obj.setA(5) ); // 5
alert( obj.multiplyA(2) ); // 10
alert( obj.getA() ); // 10
See Douglas Crockford's article on Private Members in JavaScript. In this way, functions can share a common variable object on their scope chain. You still can't reference it or pass it to another function, but you might be able to get the functionality you want.
Does this code do what you want? If not, I'm really curious as to why.
obj = {
funcA : function(){
this.a = 'a';
alert(this.a);
},
funcB : function(){
// but how do you access the scope in 'funcA' to access variable 'a'?
alert(this.a);
}
}
obj.funcA();
obj.funcB();
What is the difference between accessing the actual scope of a separate function and setting members on the parent object as I have done?
Also, since there isn't a way of passing scope, are you just going to use something similar to this code instead?
I can't manage to change the value of 'i' no matter how hard I try...
My code is the following:
function changeValue(){
//neither 'var i=99;' or 'i=99;' interferes with the 'i' on myFunction
}
function myFunction(){
var i;
for(i=0;i<3;i++){
alert(i);
changeValue();
alert(i);
}
}
myFunction();
My question: How can I change the value of 'i' (on MyFunction) using the changeValue function?
Also: I badly need read some guides about this, could someone give me a link to a good one?
Move changeValue() to be in the same scope as i:
function myFunction(){
var i;
for(i=0;i<3;i++){
alert(i);
changeValue();
alert(i);
}
function changeValue() { i = 99; }
}
Or, put i in the same scope as changeValue():
var i;
function changeValue() { i = 99; }
function myFunction(){
// var i; // don't define i here
for(i=0;i<3;i++){
alert(i);
changeValue();
alert(i);
}
}
Alternatively, you can tell changeValue() what the value of i is, then have it return the new value:
function changeValue(i) {
return i + 1;
}
Then:
i = changeValue(i);
Edit: To illustrate scope:
var a = 0; // global scope - accessible everywhere via a
// unless overridden by a locally scoped a
// always accessible via window.a
function doSomething () {
var a = 1; // local scope - you can still access window.a
var b = 2; // local scope - accessible to child scopes, but not global scope
function innerFunction () {
var a = 3; // you no longer have access to the parent function's a variable
// you can still access window.a
var c = 4; // only accessible here (since no child scopes exist)
alert(window.a); // 0
alert(a); // 3
alert(b); // 2
alert(c); // 4
}
innerFunction();
alert(window.a); // 0
alert(a); // 1
alert(b); // 2
alert(c); // undefined - unavailable in this scope
}
doSomething();
alert(window.a); // 0
alert(a); // 0
alert(b); // undefined - unavailable in this scope
alert(c); // undefined - unavailable in this scope
You could simply return the value :
function changeValue(i) {
return i + 2;
}
for(i=0;i<3;i++){
alert(i);
i = changeValue(i);
alert(i);
}
function myFunction(){
var i;
for(i=0;i<3;i++){
alert(i);
i = changeValue();
alert(i);
}
}
while changeValue():
changeValue(){
return new_i;
}
You can only manipulate variables that are inside your scope. Currently, the scope of i is confined to myFunction().
This is an excellent article to get you started understanding the scope rules in JavaScript.
Both changeValue and myFunction exist in the global scope. If you define i in myFunction, it's only accessible inside myFunction and its children, functions defined inside myFunction. The 'scope chain' (I'm just thinking up a word for it) looks like this:
myFunction <- window
changeValue also exists in the global scope. It is called from myFunction, but that doesn't change the scope in which it exists. Its scope chain is like this:
changeValue <- window
If you only use changeValue inside myFunction, you can do this:
function myFunction() {
function changeValue() { /* stuff */ }
/* more stuff */
}
changeValue's scope chain is now like this:
changeValue <- myFunction <- window
As i exists in myFunction, it now also exists in changeValue.
when you are using var within myFunction, it becomes a local variable in that scope. So you can't access it anywhere outside not matter how hard you try.
Use window.i instead of var i in both places and it should work,
You can simply avoid window. and use i directly without var prefix or even place the var i declaration outside both the functions... but effectively the variable become a part of the window object. (In general all global variable in JS are part of the window object)