Research Context - mikehov/Dating-app GitHub Wiki

Progressive Context Research

Mike Hovenier | Tech-4

What is This?

The context of this is the value of the keyword which is a reference to that object that "owns" the currently executing code or the function where it's looked at. In other words, this can be anything but changes by the way it's being called. If the function is a part of an object, you call this a method. By default, this will just be window. An example to demonstrate this:

let obj = {
  nameFunction: function() {
    console.log(this); // object
  }
};

obj.nameFunction();

So in the example above, this is now equal to an object called obj. To test this type:

console.log(this === obj) // true

The console will say: true. So if you change the console.log to:

console.log(this === window) // false

it will say: false.

It means that the default of this changed because it's being called differently. this is getting called in this line: obj.nameFunction();, so it's getting called as an object. That means if you just call this like this: console.log(this), it will say it's a window.

There are three different JavaScript methods of changing context.

• Call
• Apply
• Bind

Call

With call, you change the context of the call. So if you say obj.nameFunction.call(window); than this is now equal to window again. With call you can put as many arguments if you want. Call looks like this:

let obj = {
  nameFunction: function(a, b) {
     console.log(this === window); // object
  }
};

obj.nameFunction.call(window, x, y);

The window argument will be ignored, so that makes x and y the first and the second argument in away. So that means the window won't fill the argument a or b, x and y will do it instead.

Apply

Apply is almost the same as call, but it can only take two arguments, so window will be one argument and one the other. If you want to use multiple arguments, you can put them into an array. So something like this:

let obj = {
  nameFunction: function(x, y) {
     console.log(this === window); // object
  }
};

obj.nameFunction.apply(window, [x, y]);

The array with x and y will be the second argument of the call. They will still both fill in a and b.

Bind

Bind return a bound function, so what it does, it executes nameFunction but with the context of window.

let obj = {
  nameFunction: function() {
    console.log(this); // window
  }
};

let boundNameFunction = obj.nameFunction.bind(window);
boundNameFunction();

this will now be a window.

How can I use Scope for my project?

I don't really see that many use cases of using this, it can sometimes maybe be really useful but not for my project I suppose.

Sources

Gupta, D. (2019, January 6). 302 Found. Retrieved June 29, 2020, from https://towardsdatascience.com/javascript-context-this-keyword-9a78a19d5786

Programming with Mosh. (2018, May 15). JavaScript this Keyword [Video file]. In YouTube. Retrieved from https://www.youtube.com/watch?v=gvicrj31JOM

this. (n.d.). Retrieved June 21, 2020, from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this