title: this inside arrow functions in JavaScript
body: <p>I have this following class...</p>
  <pre><code>class Person {
      constructor(name, age) {
          this.name = name;
          this.age = age;
      }
  
      getName() {
          return this.name;
      }
  
      getAge = () =&gt; this.age;
  };
  </code></pre>
  <p>I know that when class or object methods are passed to other places, they lose <code>this</code>. So when I assign <code>p1.getName</code> method to another global variable <code>printName</code>, the value of <code>this</code> inside <code>printName</code> will be <code>undefined</code> and it will give me an error because of <code>this.name</code>. (Please see the example below) This happens because the context is changed. Is my understanding correct?</p>
  <pre><code>let p1 = new Person('John', 20);
  let printName = p1.getName;
  console.log(printName()); // Cannot read properties of undefined (reading 'name')
  </code></pre>
  <p>So what about the one with arrow function? In <code>Person</code> class, <code>getAge</code> is a class field which has an arrow function expression. When I pass <code>p1.getAge</code> to somewhere else, <code>this</code> still references the right object.</p>
  <pre><code>let printAge = p1.getAge;
  console.log(printAge());  // 20
  </code></pre>
  <p>When I pass <code>p1.getAge</code> method to global variable called <code>printAge</code>, the context is changed. Am I right? I also know the fact that, arrow functions capture <code>this</code> from its outer lexical scope. Based on my understanding, <code>this</code> shouldn't be <code>p1</code> object.</p>
  <p>I know how to bind object methods. But I just want to know why does <code>this</code> inside arrow function still refer to the right object? What am I missing? Or my already understandings are wrong?</p>