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

问题描述

我正在学习 JavaScript，但遇到了一个问题，对于有经验的人来说可能不是什么大问题，但这让我感到困惑。所以，这是我正在做的事情的一个非常基本的例子。我有两个文件，guitars.js 和 script.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()

而且它工作正常。当我把它分成模块时，我什么也做不了。

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

提前致谢。

解决方法

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

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

window.Guitars = Guitars;

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

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

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

window.newGuitar = newGuitar

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

这样的方法

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

class-method javascript methods methods module module