This is the first day of my participation in Gwen Challenge

this

In object-oriented languages, represents a reference to the current object, but in javascript changes as its execution environment changes.

In javascript this always refers to the object on which the method is called, because this is an internal object that is automatically generated at function runtime and can only be used inside a function.

Specific analysis of the following situations:

Global function calls

var name = "test";
function a() {
  console.log(this= =window);
  console.log(this.name);
}
a(); // true test
Copy the code

In a global function, this stands for the global object Window, meaning that this refers to the object on which the method was called

Object method call

function showname() {
  console.log(this.name);
}
var obj = {};
obj.name = "test";
obj.show = showname;
obj.show(); // test
Copy the code

If a function is called as a method of an object, this refers to the object on which the method was called

Constructor call

function showname() {
  this.name = "test";
}
var obj = new showname();
console.log(obj.name); // test
Copy the code

The this in the constructor refers to an instance of the object created through the constructor

apply/call

Both apply and call are used to change the this reference inside the function body. Call (thisObj, Object) Definition: To call a method of an Object that replaces the current Object with another Object. Note: The call method can be used to call a method instead of another object. The call method changes the object context of a function from its original context to the new object specified by thisObj. If no thisObj argument is provided, the Global object is used as thisObj.

Syntax: apply(thisObj, [argArray]) definition: apply a method on an object and replace the current object with another. Note: If argArray is not a valid array or arguments object, it will result in a TypeError. If neither argArray nor thisObj arguments are provided, the Global object will be used as thisObj and no arguments can be passed.

var value = "Global value";

function FunA() {
  this.value = "AAA";
}

function FunB() {
  console.log(this.value);
}
FunB(); //Global value Because FunB() is called globally,this.value refers to the Global value
FunB.call(window); //Global value,this refers to the window object, so this.value refers to the Global value
FunB.call(new FunA()); //AAA, this refers to the new FunA() argument, which is the FunA object

FunB.apply(window); //Global value
FunB.apply(new FunA()); //AAA
Copy the code

In the code above, the reference to this is the same in call and apply, except that the form of the call parameter is different. Call is a call argument, and apply is a call array.

setTimeout setInterval

If you use regular functions:

setTimeout(fn, 1000);
// Fn refers to the global environment. If fn refers to the browser environment, it refers to window
Copy the code

Arrow function

The arrow function does not bind this itself, and takes the context in which the position is defined as its this:

function t() {
  this.x = 1;

  setTimeout(() = > {
    // This is setTimeout, but the arrow function is used
    // This refers to this that defines the position
    / / output 1
    console.log(this.x);
  }, 1000);
}
Copy the code