如何在 JavaScript 中公开 Class 范围之外的方法数据

Question

我有一个使用 ES6 实现的库，我有一个 init 方法，调用时会在视图上绘制一个按钮。一些内部变化发生在“this.Object”变量中。我如何公开添加到 Class 范围之外的按钮的点击事件，以便开发人员可以访问它？

我的图书馆Class

 class Test {
    constructor(selector) {
        this.selector = document.querySelector(selector);
        this.Object = {};
    }

    init(content = null) {
        if (content == null) {
            this.selector.innerHTML = `
                <button id="test_btn" type="button">Click Me!</button>
            `;

            this.Object = {
                'name': 'test'
            };

            this.button = document.getElementById('test_btn');
            this.button.addEventListener('click', (event) => {
                console.log(this.Object);
                // how to return the variable value which is outside of the class Scope
            });
        } return this.selector, this.Object;
    }
}
module.exports = (selector) => {
    return new Test(selector);
};

当我在 html 中使用库时，如何获取 "this.object" 的值（现在是 init 方法中的更改值）以及如何打印 [=] 的新值30=] 在 html 内容中 ?

下面是 html 我使用我的库的代码

 <body>
    <div class="">Hello World</div>
    <!-- minfied version of my library -->
    <script src="build/Test.min.js" charset="utf-8"></script>

    <script type="text/javascript">
        // intialise library functionality
        Test('div').init();

        // console.log(this.new_Object)
        // How to access the object from here
    </script>
</body>

如何在 Class 范围之外公开添加到按钮的点击事件，以便开发人员可以访问它？

如果 post 需要更多说明，请随时在评论中表达您的想法。任何帮助将不胜感激。

PS：这是传统的 JavaScript，不涉及 jQuery，我尽量保持这种方式

Answer 1

解决方法如下：https://jsfiddle.net/fmvomcwn/

  module.exports = Test;

  /////
  const t = new Test('div');
  t.init();

  console.log(t.Object);

您应该从 Test 创建新对象，然后您将有权访问其字段

Answer 2

class Test {
    constructor(selector) {
        this.selector = document.querySelector(selector);
        this.Object = {};
    }

    init(content = null) {
        if (content == null) {
            var self = this;
            
            this.selector.innerHTML = `
                <button id="test_btn" type="button">Click Me!</button>
            `;

            this.Object = {
                'name': 'test'
            };

            this.button = document.getElementById('test_btn');
            this.button.addEventListener('click', (event) => {
                console.log(self.Object);
                // how to return the variable value which is outside of the class Scope
            });
        }
    }
}
//module.exports = (selector) => {
//    return new Test(selector);
//};

// intialise library functionality
var test = new Test('div');
test.init();

console.log(test.Object)
// How to access the object from here

<body>
    <div class="">Hello World</div>
</body>

当您调用事件处理程序时，处理程序中的 'this' 设置为 window 或元素（取决于浏览器）。因此，为了通过点击访问内部对象，您有 2 个选项：

在初始化时将内部变量缓存到 'this'，例如 var self = this;，并在事件处理程序中使用该缓存值，或者
您创建一个实际的事件处理程序函数并将该函数绑定到您的class;

上面第1点的例子，最简单

如何在 JavaScript 中公开 Class 范围之外的方法数据

How to expose method data out of Class scope in JavaScript

javascript

ecmascript-5

ecmascript-6