js-series/25-Understanding-this-Keyword.html at main · jdcodebase/js-series · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>25 - Understanding this Keyword</title>
  </head>

  <body>
    <button id="btn">Click Me</button>

    <script>
      /* =====================================================
         1️⃣ GLOBAL SCOPE
         ===================================================== */

      // In browser, global `this` refers to the window object
      console.log("Global this:");
      console.log(this); // window

      /* =====================================================
         2️⃣ NORMAL FUNCTION (GLOBAL CALL)
         ===================================================== */

      function sayHello() {
        console.log("Hello from Normal Function");
        console.log(this); // window (non-strict mode)
      }

      // Called without any object
      sayHello();

      /* =====================================================
         3️⃣ OBJECT WITH NORMAL & ARROW FUNCTIONS
         ===================================================== */

      const user = {
        name: "JD",
        age: 25,

        // Normal function inside object
        greet: function () {
          console.log("greet from Normal Function (Object)");
          console.log(this); // user object
          console.log(this.age); // 25
        },

        // Nested object
        obj: {
          name: "JDCodebase",

          greetObj: function () {
            console.log("Nested Object Function");
            console.log(this); // obj
          },
        },

        // Arrow function inside object
        greetArr: () => {
          console.log("Arrow Greet Function");
          console.log(this); // window
          console.log(this.name); // undefined / empty
        },
      };

      // Object method calls
      user.greet();
      console.log(user.obj.name);
      user.obj.greetObj();
      user.greetArr();

      /* =====================================================
         4️⃣ EVENT HANDLER (NORMAL FUNCTION)
         ===================================================== */

      document.getElementById("btn").addEventListener("click", function () {
        console.log("Button Clicked");
        console.log(this); // button element
      });

      /* =====================================================
         5️⃣ NORMAL FUNCTION vs ARROW FUNCTION (GLOBAL)
         ===================================================== */

      function normalFunc() {
        console.log("Normal Function (Global)");
        console.log(this); // window
      }

      const arrowFunc = () => {
        console.log("Arrow Function (Global)");
        console.log(this); // window
      };

      normalFunc();
      arrowFunc();

      /* =====================================================
         6️⃣ call(), apply(), bind()
         ===================================================== */

      function greetCall(city) {
        console.log(this.name + " from " + city);
      }

      // call → arguments passed one by one
      greetCall.call(user, "Delhi");

      // apply → arguments passed as array
      greetCall.apply(user, ["Delhi"]);

      // bind → returns new function, does not execute immediately
      const newFunc = greetCall.bind(user, "Delhi");
      newFunc();
    </script>
  </body>
</html>