this

Refers to the body of the current function execution (the function this is executed by whoever).

The “this” outside the function is the window, and we usually study the “this” pointing problem inside the function

Who is this has nothing to do with where it's defined or where it's executed

function eat(){
    console.log(this)     //window
}
eat();

function fn(){
    function b(){
        console.log(this);   //window
    }
    b()
}
fn()


function n(){
    console.log(this)           //window
}
~function (){
    n()
}()

var obj={
    fn:function (){
        console.log(this)
    }
}
obj.fn()   //this: obj
var f=obj.fn;
f()    //this: window
Copy the code

In js non-strict mode this:

1. This in self-executing functions is usually window

var obj={
    fn: (function(){
        // this window
        return function()} {}}) ()Copy the code

2. Bind a method to an event of an element. When the event triggers the execution of the event, this in the method is usually the element itself

oBox.onclick=function(){
    //this : oBox
}
Copy the code

3. Another quick way to distinguish this when a method is executed is to see if it is preceded by a method.: there are...Whoever is in front of this is this, no.This is usually the window

var obj={
    fn:function (){
        console.log(this)
    }
}
obj.fn()   //this :obj
var f=obj.fn;
f()    //this:window
Copy the code

In JS strict mode this:

Enable STRICT JS mode: add “use strict” to the first line of the current scope to enable strict mode, so that any js code executed in the current scope is processed in strict mode

If the execution body is undefined, this refers to undefined (in non-strict mode, it refers to window).

"use strict"
function fn(){
    console.log(this);
}
fn()   //=>this:undefined
window.fn()  //=> this:window
Copy the code

case

function fn(){
    //this:window
    console.log(this)}document.body.onclick=function(){
    //this:body
    fn();   // Execute without '. 'this: window
}
Copy the code
//window global scope
Var num; var obj; var fn;
Num =1;
// create heap memory space aaAFFff000
    Num = 2; Fn: the result returned by the self-executing function
        // The stack memory A cannot be destroyed because it is used by obj.fn.
            // Set num = 1
            // There is no variable promotion
            // Code execution
            //this.num*=2 (this is window
            //num+=2 (private parameter) Private num =3
            //return a function (reference data type)
                // Create a heap space AAAFFF111
                // Store a string
                //return AAAFFF111
    //fn =AAAFFF111
// assign aaAFFff000 to obj

//fn=obj.fn; fn = AAAFFF111
//fn() finds AAAFFF111 to form private scope B
    // There is no parameter or variable promotion
    //this.num*=3; This = window global num=6
    //num++; Num =4 private parameter of private scope A not found upward
    / / print 4
    // scope B is destroyed
//obj.fn() still finds the AAAFFF111 private scope
    // There is no parameter or variable promotion
    //this.num*=3; This is obj obj num=6
    //num++; Private num =5 is not found in private scope A
    / / print 5
    // scope destruction
Num =6
// obj num=6
// Destroy heap memory
    //fn=null;
    //obj.fn=null
    //obj=null

/ / 4 5 6 June
var num=1;
var obj={
    num:2.fn: (function(num){
        this.num*=2;
        num+=2;
        return function(){
            this.num*=3;
            num++;        // Num is in the upper scope
            console.log(num)
        }
    })(num)
}
var fn=obj.fn;
fn();
obj.fn();
console.log(num,obj.num)
Copy the code

Asynchronous synchronous

Synchronization: the following tasks will not be executed until the current task is completely completed

Asynchronous: the current task in JS is not complete and needs to be completed for a while, so we can proceed with the following task

All event bindings are programmed asynchronously, so you can do something else without waiting for execution