通过实例方法和此-执行上下文访问JS类/对象变量

Question

First Question: Why is the value for this in getXArrow() equal to the Solution object? Shouldn't it equal the this value of the solution object which called it, which would be the Window object?

Second Question: Shouldn't the JS Engine travel up the scope chain of each function to find the value of x? The scope of getX() and getXArrow() don't have x , so the JS engine would check their caller (the Solution object) and find x: 10 , as declared in the constructor. Instead, it seems to jump up to the global scope?

let x = 5
class Solution {
    constructor() {
        this.x = 10
    }
    getX() {
        console.log(this); 
        console.log(x); 
    }
    getXArrow = () => {
        console.log(this); 
        console.log(x); 
    }
}

s.getXArrow() // Output: Solution
              //         5
s.getX()      // Output: Solution
              //         5

Thank you!

Answer 1

getX just has two scopes accessible: It's own function scope and the global scope. Classes don't create a scope, and thus x cannot be accessed. You do however have access to the instance via this and can access its .x property.