this

this is a keyword of JavaScript language. It is an object automatically generated inside the function body when the function is running. It can only be used inside the function body.

function test() {
    this.x = 1;
}

Multiple directions of this:

In JavaScript, this is not fixed. It will change with the change of execution environment.

• In an object method, this points to the object to which the method belongs.
• Use this alone, which points to the global object.
• In function use, this points to the owner of the function.
• In strict mode, the function is not bound to this, and this is undefined.
• In an HTML event, this points to the HTML element that receives the event.
• Methods like call() and apply() can reference this to any object.

How does this point change?

• The general idea is to call and apply methods: take an object as the first parameter of call or apply, and this will be bound to this parameter object

var obj = {
    parent:'male'
};
var parent = '28';
function child(obj){
    console.log(this.parent);
}
child(); // 28  
child.call(obj); //male
child.apply(obj); //male

• Bind method: calling f.bind(someObject) will create a function with the same function body and scope as F, but in this new function, this will be permanently bound to the first parameter of bind, no matter how the function is called.

function f(){
    return this.a;
}
var g = f.bind({a:"js"});
console.log(g()); // js

var h = g.bind({a:'html'}); // this has been bound to the first parameter of bind. The binding will not be repeated. The output value is js
console.log(h()); // js

var o = {a:css, f:f, g:g, h:h};
console.log(o.f(), o.g(), o.h()); // css, js, js

• Arrow function: in the arrow function, this of the arrow function is set to the closed lexical environment. In other words, this in the arrow function depends on the environment when the function is created.

var objProject = this;
var foo = (() => this);
console.log(foo());  // window
console.log(objProject);  // window
console.log(foo() === objProject ); // true
// As a method call of an object
var obj = {foo: foo};
console.log(obj.foo() === objProject ); // true
// Try using call to set this
console.log(foo.call(obj) === objProject ); // true
// Try using bind to set this
foo = foo.bind(obj);
console.log(foo() === objProject ); // true

• When calling a method as an object: when a function is called as a method of an object, this points to the object of the function being called

var obj = {
    a: 37,
    fn: function() {
        return this.a;
    }
};
console.log(obj.fn());  // 37

• As a constructor: when a function is used as a constructor (using the new keyword), its this is bound to the new object being constructed.

function C(){
    this.a = 37;
}

var o = new C();
console.log(o.a); //  37
function C2(){
    this.a = 37;
    return {a:38};
}
o = new C2();
console.log(o.a); //  38. Set the return object manually

• As a DOM event handler, when a function is used as an event handler, its this points to the element that triggers the event

// When called, turns the associated element blue
function bluify(e){
    console.log(this === e.currentTarget); // Always true

    // true when currentTarget and target are the same object
    console.log(this === e.target);        
    this.style.backgroundColor = '#A5D9F3';
}
  // Gets a list of all elements in the document
  var elements = document.getElementsByTagName('*');

  // Take bluefy as the click listening function of the element. When the element is clicked, it will turn blue
  for(var i=0 ; i<elements.length ; i++){
  elements[i].addEventListener('click', bluify, false);
}