如何从浏览器的控制台调用或访问 JavaScript 中的类方法？答案

【问题标题】：How to call or access a class method in JavaScript from the browser's console?如何从浏览器的控制台调用或访问 JavaScript 中的类方法？
【发布时间】：2021-06-29 18:41:17
【问题描述】：

我正在学习 JavaScript，遇到了一个对于更有经验的人来说可能没什么大不了的问题，但这让我感到困惑。所以，这是我正在做的一个非常基本的例子。我有两个文件，guitars.js 和 script.js。

吉他.js：

class Guitars {
    constructor(brand, model, type) {
        this.brand = brand;
        this.model = model;
        this.type = type;
    }

    changeDetails(newBrand, newModel, newType) {
        this.brand = newBrand;
        this.model = newModel;
        this.type = newType;
    }
}
export default Guitars

script.js:

import Guitars from "./guitars.js";

const newGuitar = new Guitars ("Epiphone", "Les Paul", "electric")

console.log("The new guitar: ", newGuitar)

我在一个 html 文件中有这个，像这样：

<script type="module" src="guitars.js" defer></script>
<script type="module" src="script.js" defer></script>

当我在浏览器中打开控制台时，我可以看到对象及其所有属性已创建，但我如何访问/调用该 changeDetails() 方法？

当我将所有内容放在同一个文件中时，我可以通过键入以下内容来访问所有内容：

newGuitar.changeDetails()

而且效果很好。当我把它分成模块时，我什么也做不了。

如果有人能帮我解决这个问题，我将不胜感激。

提前致谢。

【问题讨论】：

输入时看到的错误是什么：newGuitar.changeDetails('a','b','c');
嗨，首先，它不会像往常一样自动完成，如果我输入它并按回车键，我会收到以下红色消息：“未捕获的 ReferenceError：newGuitar 未在中定义： 1:1"
哦，你想在 chrome 控制台中访问它。我的错。看看这里发布的答案。

标签： javascript methods module class-method

【解决方案1】：

这里有多种可能的方法。其中之一可能是将newGuitar 实例存储在某个全局变量中，然后在您的控制台中访问它。

所以尝试将其添加到您的 script.js 文件的末尾：

window.newGuitar = newGuitar

然后在您的浏览器控制台中您可以访问window.newGuitar.changeDetails()之类的方法

注意：将实例存储在全局变量中不是一个好习惯，它应该仅用于某些调试原因等……

【讨论】：

我尝试了上述所有解决方案，都可以，谢谢！

【解决方案2】：

模块封装数据，本质上将它们隐藏在全局范围之外。如果不是这种情况，您将不得不担心在导入其他模块时可能会发生名称冲突。

如果您想全局公开此数据，则必须通过将公开的值分配给 window 对象来显式地进行公开。例如：

window.Guitars = Guitars;

在这种情况下，您应该能够直接在浏览器的控制台中使用此类（要调用的函数）：

【讨论】：