this

1.”this” is the object that calls the method.

1
2
3
4
5
6
7
let cat = {
    name: "Tom",
    sayName() {
        console.log("My name is " + this.name);
    }
}
cat.sayName();

The output:
My name is Tom

2.Global functions are essentially methods of the window.

1
2
3
4
function func(){
    console.log(this);
}
func();

The output:
[object Window]

3.dom element

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">Click me</button>
</body>
<script>
    const btn = document.getElementById("btn");
    btn.onclick = function(){
        console.log(this);
    }
</script>
</html>

The output is:
<button id="btn">Click me</button>

4.However, if we write like this, the output is surprisingly changed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">Click me</button>
</body>
<script>
    const btn = document.getElementById("btn");
    btn.onclick = () =>{
        console.log(this);
    }
</script>
</html>

The output is:
[object Window]

Why this happened?

Regular Function function() {} has dynamic this binding, while Arrow Function () => {} has lexical this binding.

For Regular Function: this refers to the element that triggered the event.

For Arrow Function: this is determined by where the function is defined, not how it’s called.