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

【问题标题】：Accessing JS Class/Object Variables Via Instance Methods and This - Execution Contexts通过实例方法和 this 访问 JS 类/对象变量 - 执行上下文
【发布时间】：2019-12-02 22:11:12
【问题描述】：

第一个问题：为什么getXArrow() 中this 的值等于Solution 对象？它不应该等于调用它的解决方案对象的this 值，这将是 Window 对象？

第二个问题：JS 引擎不应该沿着每个函数的作用域链向上查找 x 的值吗？ getX() 和 getXArrow() 的作用域没有x，因此 JS 引擎会检查它们的调用者（Solution 对象）并找到构造函数中声明的x: 10。反而好像跳到了全局范围？

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

谢谢！

【问题讨论】：

默认情况下，类方法的this 是实例对象本身。类成员不会像在其他语言中那样被提升到词法范围；你必须使用this.x 才能到达那个 x
JS 有词法作用域，调用者是谁并不重要。无论如何，您的脚本中只有一个 x 变量 - 属性不是变量。
每个帖子只问一个问题。顺便说一句，您的第一个问题可以通过寻找箭头函数的工作原理来轻松研究。

标签： javascript ecmascript-6 es6-class arrow-functions executioncontext

【解决方案1】：

getX 只有两个可访问的范围：它自己的函数范围和全局范围。类不创建范围，因此无法访问 x。但是，您可以通过 this 访问该实例，并且可以访问其 .x 属性。

【讨论】：