What is this

In JavaScript, the this keyword refers to the object on which the code is currently executing. Normally this would point to something like this:

• The default binding
  • By default, this points to a global object
  • In functions, when not in strict mode, this refers to the global object
  • In functions, this is undefined in strict mode
• Implicit binding
  • If a function has this and the function is called by an object of the upper level, then this refers to the object of the upper level
  • This refers to the upper object of the called method, not its outermost object
  • This is determined at runtime, not at definition time
  • You also need to be careful when passing a function as an argument to a method. The function’s this also refers to the object above which the method was called
• According to the binding
  • The bind() method is used to explicitly modify the reference to this, as are the call() and apply() methods
• The new binding
  • If the return value is an object, this refers to the returned object. If the return value is not an object, this refers to an instance of the function
• In the arrow function, this points to the value of this in the scope in which the function was declared
• In the event handler, this is bound to the element where the listener is placed

The default binding

Global

In the context of global execution, this refers to a global object

console.log(this === window); // true
Copy the code

Function

If not in strict mode, the function this refers to the global object

function f() {
  return this;
}

console.log(f() === window); // true
Copy the code

When in strict mode, a function’s this will be undefined, except for explicit calls to window

'use strict';

function f() {
  return this;
}

console.log(f()); // undefined
console.log(window.f() === window); // true
Copy the code

Implicit binding

function f() { console.log(this.a); } var obj = { a: 2, f: f, }; var obj1 = { a: 3, obj: obj, }; var func = obj.f; var a = "Global"; function doFunc(fn) { fn(); } obj.f(); // 2 // If a function has this and the function is called by a higher-level object, this refers to the higher-level object obj1.obj.f(); // 2 // If a function has this and the function is called by a higher-level object, this refers to the higher-level object obj1.obj.f(); // this refers to the object above the called method, not its outermost object func(); // this refers to the object above the called method, not its outermost object func(); // Global // this is determined at runtime, not at definition doFunc(obj.f); // Global // When passing a function as an argument to a method, note that this of the passed function also refers to the object above which the method was calledCopy the code

According to the binding

The bind() method is used to explicitly change the reference to this

function f() { console.log(this.a); } var obj = { a: 2, f: f, }; var a = "Global"; setTimeout(obj.f.bind(obj), 100); / / 2Copy the code

The new binding

If the return value is an object, this refers to the returned object. If the return value is not an object, this refers to an instance of the function

function fn() { this.user = "Tom"; return 1; Return undefined} var fun = new fn(); console.log(fun.user); // Tom function fn() { this.user = "Tom"; return {}; Return function(){}} var fun = new fn(); console.log(fun.user); // undefinedCopy the code

This in the arrow function

This is static and always refers to the value of this in the scope in which the function was declared. Call () and apply() cannot change the pointer

function who() {
    console.log(this.name);
}

let who1 = () => {
    console.log(this.name);
};

window.name = "Tom";

const name1 = {
    name: "Jerry",
};
//直接调用
who(); // Tom
who1(); // Tom
    
//使用call()
who.call(name1); // Jerry
who1.call(name1); // Tom
Copy the code

This in the event handler

This is bound to the element where the listener is placed

const el = document.getElementById('my-el');

el.addEventListener('click', function() {
  console.log(this === el); // true
});
Copy the code

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

This is a personal learning record. Please point out any mistakes

Welcome friends to come to exchange, if reproduced, please indicate the source, thank you

Everyone who works hard deserves to be recognized, but the biggest affirmation comes from yourself!!

Come on every day!!