There is a YouTube playlist that I did explaining the whole concept mentioned in this article, if you are that person who wants to watch and learn, please head on there.
The agenda
- Talk about the execution context
- About
use strictand globalthis - Where to define a function
- Does location matter for functions
- Putting a function in an object literal
- Inside a method function
- How to invoke a function
- Normal function invocation
- Method invocation
- Explicit binding invocation
- How arrow functions differ
- Where to declare the arrow functions
- How to invoke them
- Conclusion
- Recap differences between using
use effectand not - Different types of invocations
- Location of a normal function
- Arrow functions invocation and location
- Recap differences between using
What is this
The this keyword refers to the object that a function gets based on how it is invoked. For arrow functions, it refers to the this context that gets assigned to the enclosing function.
depends on
- whether you used
use strict - how the function is invoked
- where the function is declared
- whether it is an arrow function or now
About use strict and this
When you use this in global scope, it refers to the window object in a browser. It refers to globalThis when in Node.js environment.
But if you use strict mode (by putting use strict at the beginning of your file), then you will not get window object when you use this. In fact it points to undefined.
function foo() {
console.log(this === window); // true
}
"use strict";
function foo() {
console.log(this === window); // false
}
Where to define a function
In modern JavaScript development, we generally tend to put functions in their own files, thanks to the JavaScrpt ES6 modules, CommonJS pattern and many other techniques that work towards using per-file concept.
But we are not touching the module system or the import and export feature of ES6. In this series, we are only concerned about the question of whether a function is declared outside another function or not.
function foo() {
console.log(this === obj);
}
const obj = {
name: "naga",
foo: function() {
console.log(this === obj);
}
}
obj.foo(); // true
foo(); // false
Remove duplicate function declaration:
function foo() {
console.log(this === obj);
}
const obj = {
name: "naga",
foo: foo
}
obj.foo(); // true
foo(); // false
Location does not matter when it comes to using the this context:
// foo.js
export default function foo() {
console.log(this);
}
// bar.js
import foo from './foo.js';
const obj = {
name: "naga",
foo: foo
}
obj.foo(); // prints obj
foo(); // prints window
invoking a member method without the object
const obj = {
name: "naga",
foo: function () {
console.log(this === obj);
}
}
obj.foo(); // true
const foo = obj.foo;
foo(); // false
Putting a function inside a method
const obj = {
name: "naga",
foo: function() {
function bar() {
console.log(this === obj);
}
console.log(this === obj);
return bar;
}
}
const barFunc = obj.foo(); // true
barFunc(); // false
Ways to invoke a function
normal invocation
function foo() {
console.log(this); // global or window
}
foo();
method invocation
function foo() {
console.log(this); // points to obj
}
const obj = {
foo: foo
}
obj.foo(); // prints obj
explicit binding
function foo() {
console.log(this); // normally prints global or window
}
const obj = {
bar: 10
}
const boundFoo = foo.bind(obj);
boundFoo(); // prints obj coz of the binding
using call or apply
function foo() {
console.log(this); // normally prints global or window
}
const obj = {
bar: 10
}
foo.call(obj); // prints obj coz of the binding
foo.apply(obj); // prints obj coz of the binding
call vs apply
const math = {
add: function () {
const args = Array.from(arguments);
return args.reduce((sum, num) => sum + num);
}
}
const thisArg = null;
const add5 = math.add.bind(thisArg, 5); // returns a curried function
console.log(add5(10)); // 15
console.log(math.add.call(thisArg, 5, 10)); // 15
console.log(math.add.apply(thisArg, [5, 10])); // 15
Fixing sub-function problem
the problem
const obj = {
name: "naga",
foo: function() {
function bar() {
console.log(this === obj);
}
console.log(this === obj);
return bar;
}
}
const barFunc = obj.foo(); // true
barFunc(); // false
using scope
const obj = {
name: "naga",
foo: function() {
const self = this;
function bar() {
console.log(self === obj); // oh yeah works
}
console.log(this === obj); // always true
return bar;
}
}
const barFunc = obj.foo(); // true
barFunc(); // true
using explicit binding
const obj = {
name: "naga",
foo: function() {
function bar() {
console.log(this === obj);
}
console.log(this === obj);
return bar;
}
}
const barFunc = obj.foo(); // true
const barFuncBound = barFunc.bind(obj);
barFuncBound(); // now it works --> true
How arrow functions differ from normal functions regarding this
We know normal functions take the this context based on how they are invoked and not based on where they are declared*.*
Arrow functions take the this context based on where they are declared and not based on how they are invoked.
const foo = () => {
console.log(this === window); // true
}
foo(); // true
const obj = {
foo: foo
};
obj.foo(); // true, so not bound to obj even though it is a method
const objFooBound = obj.foo.bind(obj);
objFooBound(); // true, still points to window, bind fails
const fooBound = foo.bind(obj);
fooBound(); // still true, bind fails
What if we declare in a function
Now the arrow function totally obeys the enclosing scope's this context because it is declared inside it.
function foo() {
const bar = () => {
console.log(this === window);
}
bar();
}
foo(); // true, enclosing function is called in the normal way
const obj = {
baz: 10,
foo: foo
}
obj.foo(); // now false, enclosing function called using method invocation
const boundFoo = foo.bind({});
boundFoo(); // now also false, enclosing function bound to an object
visiting our old example
const obj = {
name: "naga",
foo: function() {
const bar = () => {
console.log(this === obj); // true, now it takes context of the foo method
}
console.log(this === obj); // obviously true
return bar;
}
}
const bar = obj.foo(); // true
bar(); // true
this fixes the problem of having functions inside methods of an object. you may use arrow functions.
Conclusion
- Declare normal functions anywhere, just not inside the object methods
- Use arrow functions for functions inside methods
- You can invoke normal functions in three ways: normal way, as an object method and by explicitly binding
- Arrow functions do not care how you invoke them, all they care is where they are declared.
- Use
use strictto avoid accidentally putting stuff in the global context (window or globalThis)
Top comments (0)