如何创建一个 javascript 函数“类”，以便我可以从函数外部和内部访问“方法”

Question

我正在创建一个函数来处理围绕分页和排序表格的一堆东西。它包含一个提交db查询和更新显示表的关键函数。

我希望能够从函数内部以及创建的对象的外部访问该内部函数/方法。

testFunction = function() {
    keyMethod = function() {
        console.log('ya got me');
    };

    document.getElementById('test').addEventListener('click', function (e) {
        keyMethod();
    });

    keyMethod();
};

myTest = new testFunction();
myTest.keyMethod();


testFunction = function() {
    this.keyMethod = function() {
        console.log('ya got me');
    };

    document.getElementById('test').addEventListener('click', function (e) {
        // would have to use bind here which then messes up trying to
        // find the correct target etc.
        keyMethod();
    });

    this.keyMethod();
};

myTest= new DrawShape();
myTest.keyMethod();

以第一种方式创建它意味着 keyMethod 函数在 testFunction 中的任何地方都可用，但我不能从外部调用它。

以第二种方式创建它意味着我可以执行 myTest.keyMethod 但我不能从内部函数中调用它而不使用到处绑定。

有没有更好的方法..？

Answer 1

您可以将作为回调提供的函数替换为 arrow function 或使用 bind 函数，就像您已经说过的那样。

testFunction = function() {
    this.keyMethod = function() {
        console.log('ya got me');
    };

    // Replace callback by simply providing the function to call.
    // This works as long as you don't use the `this` keyword inside the
    // provided function.
    document.getElementById('test').addEventListener('click', this.keyMethod);

    // If your callback method does use the `this` keyword you can either use an
    // arrow function or bind the function up front.
    document.getElementById('test').addEventListener('click', event => this.keyMethod());
    document.getElementById('test').addEventListener('click', this.keyMethod.bind(this));

    this.keyMethod();
};

console.log("constructor output:");
myTest = new testFunction();
console.log(".keyMethod() output:");
myTest.keyMethod();
console.log("click event output:");

<button id="test">test</button>