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

Question

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

guitar.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>

当我在浏览器中打开控制台时，我可以看到创建了对象及其所有属性，但是我如何才能 access/call 使用 changeDetails() 方法？

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

newGuitar.changeDetails()

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

如果有人能帮助我，我将不胜感激。

提前致谢。

Answer 1

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

如果您想在全球范围内公开此数据，则必须通过将公开的值分配给 window 对象来明确地进行。例如：

window.Guitars = Guitars;

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

Answer 2

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

因此请尝试将此添加到 script.js 文件的末尾：

window.newGuitar = newGuitar

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

等方法

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

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

How to call or access a class method in JavaScript from the browser's console?

javascript

methods

module

class-method