In a javascript file, when I declare a function using function keyword, I can placed my function after my caller function, something like
// test.js
function myCaller() {
foo('hello world'); // this works!
this.foo('hello world'); // this works!
}
function foo(text) {
console.log('foo called!', text);
}
myCaller()but if I turned the foo into an arrow function, and placed it at same position, then in myCaller function, it said foo is not defined, also it won't work if I use this keyword to locate the foo function, which I assume the this refers to global/document level
// test.js
function myCaller() {
foo('hello world'); // es-lint warning: 'foo' was used before it was defined
this.foo('hello world'); // compilation error: foo is not defined
}
const foo = (text) => {
console.log('foo called!', text);
}
myCaller(); - I was wrong, I thought the 2nd approach without using this does not work because of javascript compilation error of not defined, but it was actully my eslint error - 'foo' was used before it was defined, does it mean it's not recommend to do this way?
Why is that and does it mean we have to declare the arrow function always above caller function? Is there any alternative way to solve that?
const foo = (text) => {
console.log('foo called!', text);
}
// test.js
function myCaller() {
foo('hello world'); // this works! no es-lint warning now
this.foo('hello world'); // no compilation error but there is a run-time error : 'this.foo is not a function'
}
myCaller();In addition, I found when declare the arrow function inside a javascript class, it would work with this keyword only with caller function being arrow function as well, if caller function is with function keyword, this will not work...
// myTest.js
class myTest {
myCaller() {
foo('hello world'); // compilation error: foo is undefined
}
myCaller2 = () => {
this.foo('hello world'); //this works!
}
foo = (text) => {
console.log('foo called!', text);
}
}
new myTest().myCaller();
new myTest().myCaller2();1 Answer 1
Any variables (except let and const variables) that you declare or functions that you define in global context (say, directly in test.js) will be attached to Window object. So, when you write,
// test.js
function myCaller() {
foo('hello world'); // this works!
this.foo('hello world'); // this works!
}
function foo(text) {
console.log('foo called!', text);
}
myCaller()
Both myCaller and foo are attached to window object as properties. Now you can refer to them either directly like foo()(this is implicit here) or this.foo() or even window.foo(). Since js uses hoisting, these variables or functions are first attached to the context and then starts executing.
But const and let are not attached to the Window object (otherwise they would be accessible everywhere, behaving exactly like var). So when you write
// test.js
function myCaller() {
foo('hello world');
this.foo('hello world');
}
const foo = (text) => {
console.log('foo called!', text);
}
myCaller();
Javascript engine scans through the entire script to see if there are any variables or functions defined. In this hoisting phase, if it finds a const or let, it allocates memory for them but won't make them part of Window object. So, when you are referring to this in global context, it is referring to window object and foo is not a property of window object. That is why, even if you put const foo above myCaller definition, it won't work.
In case of class, if you try to call foo() directly without referring to this, it tries to access it from the enclosing contexts, where it is not defined in your example. So it throws error. If you define another foo() outside the class with var or directly as foo = (text) => ..., it will work.
(The this may not be always referring to global context. Functions and classes can have their own custom context, and this would refer to that context. But when no custom context is defined by the functions or classes, the global context will be the one the this keyword would be referring to. The this is undefined for functions and classes by default in strict mode. There are several such caveats to be taken into consideration.)
5 Comments
this inside myCaller is (or might not) be the global object...foo() inside the class isn’t necessarily looked up from a global context, just from any surrounding scope.foo() outside my class, then I can call foo() directly inside my class method, does it mean that now it's because the foo() is attached to the global windows context and that's why I can call it inside my class method?That is why, even if you put const foo above myCaller definition, it won't work. Actually if I directly call the foo() without this, it did work...It's just not work when I call this.foo(), but since you mentioned, when met with const or let, JS allocates memory for them but not make them part of Window object, that'd prob explain why this.foo() not work because currently the this refers to windows context, hwever, why calling without this would work this time?Explore related questions
See similar questions with these tags.
constthis.foowould subsequently fail even if const foo was above myCaller - since const and let variables are not added to the "global" object -thiswould likely be the global object (window on a browser) in your codeconst? I cannot remove theconst...if I remove theconst, there is compile error saidfoo is not definedmyCallerfunction, as it's already generated compilation error, in addition, why it works when it usesfunctionkeyword but just not for arrow function?