To understand the four forms of this, it is enough to finish this article!!

“This is the 8th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

What is this

The value of this is bound at run time, and the way the function is called determines the value of this, which is simply an execution context.

How to determine the direction of this?

Basically, this refers to whoever calls it.

The four forms of this

1. Through simple function calls

When a function is declared in a global scope, the context is the global object. Window in the browser, global in the Node environment; Of course it has to do with not only the environment but also whether it’s strict or not.

Non-strict mode browser environment

// Browser environment
function fun(){
    console.log(this) // window
}
fun()
Copy the code

Non-strict mode Node environment

/ / the node environment
function fun(){
    console.log(this) // global
}
fun()
Copy the code

Strict mode browser environment

In the browser environment, when used outside a function, it points to window, but when used inside a function, it points to undefined

// Browser environment
"use strict"
console.log(this) // window
function fun(){
    console.log(this) // undefined
}
fun()
Copy the code

Of course, the same is true for declaring strict modes in functions

// Browser environment
function fun(){
    "use strict"
    console.log(this) // undefined
}
fun()

Copy the code

Strict mode Node environment

For external use, the function points to {}, and the function points to undefined

"use strict"
console.log(this) / / {}
function fun(){
    console.log(this) // undefined
}
fun()
Copy the code

Of course, declaring strict mode inside a function also points to undefined

function fun(){
    "use strict"
    console.log(this) // undefined
}
Copy the code

What about nested functions?

Nested function

Non-strict mode – browser environment

function fun1(){
    function fun2(){
        console.log(this) // window
    }
    fun2()
}
fun1()
Copy the code

Non-strict mode-Node environment

function fun1(){
    function fun2(){
        console.log(this) // global
    }
    fun2()
}
fun1()
Copy the code

Strict mode – browser environment

"use strict"
function fun1(){
    function fun2(){
        console.log(this) // undefined
    }
    fun2()
}
fun1()
Copy the code

Strict mode-Node environment

"use strict"
function fun1(){
    function fun2(){
        console.log(this) // undefined
    }
    fun2()
}
fun1()
Copy the code

From this, we can see that it does not matter whether the function is nested or not.

2. Invoke functions through object attributes

When a function is called as an object property, it points to an object instance.

Browser environment

let obj = {
    fun:function(){
        console.log(this) // obj
    }
}
obj.fun()
Copy the code

So what happens when you use the arrow function?

let obj = {
    fun:() = > {
        console.log(this) // window
    }
}
obj.fun()
Copy the code

This is because the arrow function itself does not have this and is called globally so it points to the window.

The node environment

let obj = {
    fun:function(){
        console.log(this) // obj
    }
}
obj.fun()
Copy the code

Arrow function

"use strict"
let obj = {
    fun:() = > {
        console.log(this) / / {}
    }
}
obj.fun()
Copy the code

Calling a function from an object attribute in the Node environment points to {}.

DOM manipulation

<html>
    <button id="a">A</button>
    <button id="b">B</button>
    <script>
        function fn() {
            console.log(this)}document.getElementById('#a').addEventListener('click',fn)
        document.getElementById('#b').addEventListener('click',fn)
    </script>
</html>

Copy the code

3. Call the function with new

The this in the constructor refers to the created instance.

Es5 writing

function fun(){
    console.log(this)}function Fun(){}
Fun.prototype.fun = fun
const f = new Fun()
f.fun() // Fun
Copy the code

Es6 writing

class Fun {
   constructor() {}
   fun(){
       console.log(this)}}const f = new Fun()
f.fun() // Fun
Copy the code

4. Use the call, apply, and bind methods

The call, apply, and bind methods change the this pointer

function fun() {
  console.log(this)
}
fun()
fun.apply({id:1})
fun.call({id:2})
fun.bind({id:3})()
Copy the code