The function this points to

  1. An overview of the

    The function’s this refers to the object on which it was called, and the standalone call refers to the window

  2. Independent function calls (independent means not explicitly bound to any object)

    The this of such a function points to window by default

    1. Create a function globally and call it
    function test() {
    console.log(this);
}
console.log(window.test)//test
test();//window.test();
Copy the code

    Creates a function in the global scope. The function call is called separately (without using the xx object. B () call). So this refers to the window

    1. Creates a function in a function and calls it
      let obj = {
    name: "xiaomi".myMethods() {
        function test() {
            console.log(obj.test);//undefined
            console.log(window.test);//undefined
            console.log("-- -- -- -- -- -- --");  
            console.log(this);//window
        }
        test();
    }
}
obj.myMethods();
Copy the code

      Obj calls myMethods and creates a function inside the method that is not bound to any object (e.g. Obj.test = function(){}) and is not executed by obj (e.g. Obj.test ()). This, however, points to window by default

    2. Implicit loss
      let obj = {
    name: "Millet".sayThis() {
        console.log(this); }}var b = obj.sayThis;
console.log(window.b);//
b();//window
Copy the code

      Var b = obj. SayThis; var b = obj. If var is declared, b is bound to the Window object. B is called independently (without using xx object.b ()), so it points to the window

    3. The callback function
      let obj1 = {
    b() {
        console.log(this);//window
    }
}
a
function a(callback) {
    callback();
}

a(obj1.b)
Copy the code

      If obj. B is called, this function is assigned to the callback variable in a’s scope. Callback is not bound to any object, so it is a separate call, and by default refers to window

  3. Object calling function

    1. Ordinary object call
    let obj = {
    name: "Millet".sayThis() {
        console.log(this);
    }
}
obj.sayThis();//obj
Copy the code

    SayThis is a method bound to obj and called by obj, so this refers to obj

    1. Mouse event call
      <body>
  <button id="btn">button</button>
  <script>
    let btn = document.getElementById("btn");
    btn.onclick = function() {
      console.log(this);
    }
    
  </script>
</body>
Copy the code

      The function is assigned to the onclick property of BTN, which calls onclick and this points to BTN

  4. New a new object

    function Person() {
    this.name = "Millet";
    console.log(this);
}
new Person();//Person
Copy the code

  5. Arrow function

    Official concept: The this inside the arrow function always points to the lexical scope (the object at which it was defined)

    This in function refers to the object at which it was used, while this in arrow functions refers to the object at which it was defined

    The “this” printed next to the definition of the arrow function refers to the “this” inside the arrow function

    let fn = () = > {
    console.log(this)}// Print this next to the arrow function definition
console.log(this);//window
fn();//window
Copy the code
    var obj = {
    age: 20.say: () = > {
        console.log(this); }}// Print this next to the arrow function definition
console.log(this);
obj.say(); 
Copy the code
    var obj = {
    age: 20.say() {
        // Print this next to the arrow function definition
        console.log(this);//obj
        let a = () = > {
            console.log(this);//obj
        }
        a();
    }
}
obj.say(); 
Copy the code

​