Skip to content

Latest commit

 

History

History

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 

this

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();