daily pastebin goal
2%
SHARE
TWEET

Untitled

a guest Mar 22nd, 2019 69 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. What is Context?
  2. Context in JavaScript is referring to the key word `this`. The keyword `this` can be very confusing because it can change based on several factors. Typically, this refers to the owner of the code that’s executing it. However, this can change based on how execution occurs or whether its ES5 or ES67 notation.
  3.  
  4. There are rules to determine the value of `this`, but before we get into that it’s important to note that the value of `this` can only change inside a function.
  5.  
  6.  ES5 vs ES6 notation
  7.  
  8. vary marvelHero = {
  9.   name: 'Black Panther',
  10.   printName: function() {
  11.     console.log(this.name);
  12.   }
  13. };
  14.  
  15. marvelHero.printName() // Black Panther
  16.  
  17. The keyword `this` inside of an object’s method will refer to the object. One way to look at the example is to look at how the method is being invoked. The printName() function is to the left our marvelHero variable. Therefore, when executing a function as a method of an object `this` is referring to the object that is to the left the “.”.
  18.  
  19. ## As mentioned before the value of this can only change inside of a function.
  20.  
  21. var marvelHero = {
  22.   name: 'Black Panther',
  23.   ablities: ['SuperHuman Senses', 'Healing Powers', 'Karate Skills'],
  24.   usePowers: function() {
  25.     this.ablities.forEach(function(ability){
  26.       console.log(this.name + “ has ” + ability)
  27.     });
  28.   }
  29. };
  30.  
  31. marvelHero.usePowers() // [object window] has SuperHuman Senses
  32.                 // [object window] has Healing Powers
  33.                 // [object window] has Karate Skills
  34.  
  35. In the example above the if we invoke out marvelHero.usePowers() the value of console.log(`this`.name + ability) will no longer refer to our marvelHero object. This is due to the fact that the owner of the code is no longer the marvelHero. Instead the owner of the code executing the function is now the window object. The value of this has lost its scope and will be globally scoped. Although this is within an object’s method. The function that is executing the code is inside another function which changes the owner of the code and is now global in our example.
  36.  
  37. One way we can keep the value of `this` is when we use a keyword called .bind()
  38.  
  39. var marvelHero = {
  40.   name: 'Black Panther',
  41.   ablities: ['SuperHuman Senses', 'Healing Powers', 'Karate Skills'],
  42.   usePowers: function() {
  43.     this.ablities.forEach(function(ability){
  44.       console.log(this.name + "has" + ability)
  45.     }.bind(this));
  46.   }
  47. };
  48.  
  49. marvelHero.usePowers() // Black Panther has SuperHuman Senses
  50.                 // Black Panther has Healing Powers
  51.                 // Black Panther has Karate Skills
  52.  
  53.  
  54.  
  55. The behavior of .bind() is a way ES5 notation keeps the value of this bound to the marvelHero method.
  56.  
  57.  
  58. In ES6 notation has a different behavior than ES5.  Arrow functions  => are lexical scoped.
  59. The value of `this` in ES6 notation will traverse the scope chain where it was defined.
  60.  
  61. var marvelHero = {
  62.   name: 'Black Panther',
  63.   ablities: ['SuperHuman Senses', 'Healing Powers', 'Karate Skills'],
  64.   usePowers: function usePowers() {
  65.     this.ablities.forEach(ability =>{
  66.       console.log(this.name + "has" + ability)
  67.     });
  68.   }
  69. };
  70. marvelHero.usePowers()
  71.  
  72. In the example above the value of this with ES6 notation will console.log()
  73. // Black Panther has SuperHuman Senses
  74. // Black Panther has Healing Powers
  75. // Black Panther has Karate Skills
  76.  
  77. As mentioned earlier, the value of this can change based on several factors. Another way `this` refers to an object is whenever we use the keyword `new`. When creating new object in our constructor function the value of `this` inside our class constructor method refers to the new instance.
  78.  
  79. class SuperHeros {
  80.   constructor(name, powers) {
  81.     this.name = name;
  82.     this.powers = powers || [];
  83.   }
  84.  
  85.   changePowers(){
  86.     return this
  87.   };
  88. };
  89.  
  90. let hero = new SuperHeros('Black Panther', ['SuperHuman Senses', 'Healing Powers', 'Karate Skills'])
  91.  
  92. console.log(hero.changePowers())
  93.  
  94.  
  95. Finally, if we call our console.log(hero.changePowers()) the value of `this` will return our `Black Panther` object.
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top