this

This is a keyword in the JavaScript language. It is an object that is automatically generated inside the function body while the function is running and can only be used inside the function body.

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

Multiple directions to this:

This is not fixed in JavaScript; it changes as the execution environment changes.

  • In object methods, this refers to the object to which the method belongs.
  • Using this alone, this refers to the global object.
  • In function use, this refers to the owner of the function.
  • Strictly, the function is not bound to this, so this is undefined.
  • In HTML events, this refers to the HTML element that receives the event.
  • Methods like call() and apply() can refer to this to any object.

How does this point change?

  • The call and apply methods usually come to mind:

This will be bound to an object as the first argument to call or apply

var obj = {
    parent:'male'
};
var parent = '28';
function child(obj){
    console.log(this.parent);
}
child(); / / 28
child.call(obj); / / male
child.apply(obj); / / male
Copy the code
  • The bind method:

Calling f.bind(someObject) creates a function with the same body and scope as f, but in this new function, this is permanently bound to the first argument of bind, regardless of 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 is already bound to the first argument of bind. The output value is still 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
Copy the code
  • Arrow function:

In the arrow function, the arrow function’s this is set to the closed lexical context; in other words, the arrow function’s this depends on the context in which the function was created.

var objProject = this;
var foo = (() = > this);
console.log(foo());  // window
console.log(objProject);  // window
console.log(foo() === objProject ); // true
// as a method call to the 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
Copy the code
  • When called as a method on an object:

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

var obj = {
    a: 37.fn: function() {
        return this.a; }};console.log(obj.fn());  / / 37
Copy the code
  • 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, manually set the return object
Copy the code
  • As a DOM event handler

When a function is used as an event handler, its this refers to the element that triggered the event

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

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

  // Use Bluify as the click-listening function for the element, which turns blue when the element is clicked
  for(var i=0 ; i<elements.length ; i++){
  elements[i].addEventListener('click', bluify, false);
}
Copy the code