Definition: The this keyword is an internal object automatically generated when a function is run. It can only be used inside a function and always refers to the object on which it was called.

Also, once this is identified during function execution, it cannot be changed

var a = 10; var obj = { a: 20 } function fn() { this = obj; Console.log (this.a); } fn();Copy the code

Binding rules

In different situations, this has different values, which can be divided into the following situations:

  • The default binding
  • Implicit binding
  • The new binding
  • According to the binding

The default binding

Define the person function in the global environment, using the this keyword internally

var name = 'Jenny';
function person() {
    return this.name;
}
console.log(person());  //Jenny
Copy the code

The object calling the function is window in the viewer, so this points to window, so output Jenny

Note: In strict mode, this is bound to undefined, and only functions running in non-strict mode can be bound to global objects by default

Implicit binding

A function can also be called as a method on an object, in which case **this refers to the parent object **

function test() { console.log(this.x); } var obj = {}; obj.x = 1; obj.m = test; obj.m(); Var o = {a:10, b:{fn:function(){console.log(this); //{fn: ƒ}}}} o.b.fein (); Var FFFFN = o.b.ffffn () var FFFFN = o.b.ffffn () But 'fn' assignment to 'FFFFN' is not executed, so it ends up pointing to 'window'Copy the code

The new binding

Generate an instance object by building the function new keyword, in which case this refers to the instance object

Function test() {this.x = 1} var obj = new test(); The obj.x // 1 // new keyword changes the direction of thisCopy the code

The new procedure encounters a return object, in which case this refers to the returned object

function fn()  
{  
    this.user = 'xxx';  
    return {};  
}
var a = new fn();  
console.log(a.user); //undefined
Copy the code

If a simple type is returned, this points to the instance object

function fn()  
{  
    this.user = 'xxx';  
    return 1;
}
var a = new fn;  
console.log(a.user); //xxx
Copy the code

Note that when null is returned, new still points to the instance object

function fn()  
{  
    this.user = 'xxx';  
    return null;
}
var a = new fn;  
console.log(a.user); //xxx
Copy the code

Explicit modification

Apply (), call(), and bind() are methods of a function that change the object on which the function is called. Its first argument represents the changed object on which the function was called. So, in this case this refers to the first parameter.

var x = 0; The function test () {the console. The log (this. X); } var obj = {}; obj.x = 1; obj.m = test; Obj.m.call (obj) obj.m.bind(obj)()Copy the code

Arrow function

Arrow functions do not have their own this; this in the scope where the arrow function code is written is the arrow function’s this.

const obj = { sayThis: () => { console.log(this); }}; obj.sayThis(); Const globalSay = obj.sayThis; const globalSay = obj.sayThis; globalSay(); // The global object in window browserCopy the code

Some potential potholes need to be looked out for

const button = document.getElementById('mngb');
console.log(this)
button.addEventListener('click',function(){
​
(()=> {
    console.log(this === window) // true
    this.innerHTML = 'clicked button'
})()
} )
Copy the code

This triggers the click event object should be button, but this is’ window ‘; You can view

[Examples of anti-shake throttling] juejin.cn/post/703363…

When you add a method to the prototype, this points to the window

Cat.prototype.sayName = () => {
    console.log(this === window) //true
    return this.name
}
const cat = new Cat('mm');
cat.sayName()
Copy the code

priority

Implicit binding × Shows binding

function foo() { console.log( this.a ); } var obj1 = { a: 2, foo: foo }; var obj2 = { a: 3, foo: foo }; obj1.foo(); // 2 obj2.foo(); // 3 obj1.foo.call( obj2 ); // 3 obj2.foo.call( obj1 ); / / 2Copy the code

New binding x Implicit binding

function foo(something) { this.a = something; } var obj1 = { foo: foo }; var obj2 = {}; obj1.foo( 2 ); console.log( obj1.a ); // 2 obj1.foo.call( obj2, 3 ); console.log( obj2.a ); // 3 var bar = new obj1.foo( 4 ); console.log( obj1.a ); // 2 console.log( bar.a ); / / 4Copy the code

New binding x Explicit binding

function foo(something) { this.a = something; } var obj1 = {}; var bar = foo.bind( obj1 ); bar( 2 ); console.log( obj1.a ); // 2 var baz = new bar( 3 ); console.log( obj1.a ); // 2 console.log( baz.a ); / / 3Copy the code

Bar is bound to obj1, but new bar(3) does not change obj1.a to 3 as we expected. However, new modifies this in the binding call bar()

In summary, new binding priority > Display binding priority > Implicit binding priority > Default

A classic problem