Javascript 如何在类的外部函数中访问状态

在类的外部定义的函数的上下文中，状态指的是作为参数传递给函数的类实例关联的数据。函数可以通过引用对象的实例变量来访问和修改这些数据。

方法：

定义一个具有所需状态的类作为类变量。
创建一个类的实例。
在类的外部定义一个函数。
在函数内部，使用实例名称和变量名称（即instance_name.variable_name）来访问状态。
如果函数需要修改状态，则将实例作为参数传递并使用它来更新变量。
如果函数需要返回状态，则返回变量或实例。
使用函数和实例根据需要访问或更新状态。
示例1： 下面的示例将演示上述方法：

Javascript

class MyClass {
    constructor() {
        this.x = 20;
    }
 
    randomMethod() {
        this.x = 30;
    }
}
 
function randomFunction(obj) {
    console.log(obj.x);
}
 
const myObj = new MyClass();
randomFunction(myObj);
myObj.randomMethod();
randomFunction(myObj);

输出：

20
30

上面的例子展示了 randomFunction 是在 MyClass() 类之外定义的。当它被调用并传递一个MyClass的实例作为参数时，它可以访问对象的x状态（初始设置为20）。然后，在 myObj 对象上调用 randomMethod 方法，将x状态修改为30。再次调用 randomFunction 并将修改后的 myObj 对象作为参数传递时，它输出了x的新值（30）。

示例 2: 这是另一个展示上述方法的例子：

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <p>Click on button to access state in a 
      function outside of the class.</p>
    <p id="message"></p>
    <button id="myBtn">Click me</button>
</body>
 
<script>
    let message = "Hello World";
    document.getElementById("message")
              .innerHTML = message;
    const myFunction = (message) => {
        alert(message);
    }
 
    document.getElementById("myBtn")
              .addEventListener("click", () => {
        myFunction(message);
    });
 
</script>
 
</html>