this is a reference to a specific object whose properties can be accessed inside a function call.
This this is the execution context.
It is important to distinguish between a function call and a method call.
- in a normal function call
this = global object;
- If we run the JS code in the browser, it will be
window.- If we run the code in the Node environment, then
global.- when calling the function in strict mode
this = undefined.
When a method (belonging to an object) is called, this becomes this object.
class Planet { constructor(name) { this.name = name; } getName() { console.log(`Planet is ${this.name}`); return this.name; } }; let earth = new Planet('Earth'); earth.getName(); // Planet is Earth 'Earth'
To get the expected this , modify the context of the inner function with an indirect call (using .call() or .apply() ) or create a bound function (using .bind() ).
- The
.call(thisArg, arg1, arg2, ...)method takes as the first argument thisArg the context of the call, and the list of arguments arg1, arg2, ... is passed to the called function.
myFunction.call(thisValue, 'value1', 'value2')
- The
.apply(thisArg, [args])method takes as the first argument thisArg the context of the call, and an array-like object [args] is passed to the called function as an argument.
myFunction.apply(thisValue, ['value1', 'value2'])let rabbit = { name: 'White Rabbit' }; function concatName(string) { console.log(this === rabbit); // => true return string + this.name; }; // Indirect invocations console.log(concatName.call(rabbit, 'Hello ')); // => 'Hello White Rabbit' console.log(concatName.apply(rabbit, ['Bye '])); // => 'Bye White Rabbit'
A related function is a function associated with an object. It is usually created from a regular function using the Bind() method. The two functions have the same bodies and scopes, but different contexts.
the .bind() method allows you to associate the execution context with the function in order to determine "in advance and exactly" which value will be in this;
The method
.bind(thisArg[, arg1[, arg2[, ...]]])takes as the first argument thisArg the call context of the bound function, and the optional argument list arg1, arg2, ... is passed to the called function . It returns a new function associated with thisArg.function multiply(number) { 'use strict'; return this * number; } // create a bound function with context let double = multiply.bind(2); let trible = multiply.bind(3); // invoke the bound function console.log(double(5)); // => 10 console.log(trible (5)); // => 15
The arrow function => does not create its own execution context, but borrows this from the external function in which it is defined. The arrow function is anonymous, which means that its name property is the empty string ''. Thus, it does not have a lexical name, which is needed for recursion and handling handlers.
let group = { title: "Our group:", students: ["Ioahn", "Peter", "Mariah"], showList() { this.students.forEach( student => console.log(this.title + ': ' + student) ); } }; group.showList();