Question

我想知道我是否可以修改作为参数传递给类的方法？

例如，假设我创建了Column类，将在其中创建列，并在此列上添加EventListener，并将回调作为参数。但是我也想通过添加特殊行来修改此方法，该行将保存单击或未单击column。

class TableColumn {

    column = document.createElement('th');
    clickState = false;

    constructor(callback) {
        this.column.textContent = 'sort ascending / descending';
        this.column.addEventListener('click', callback);
    }

}

我知道我可以通过操纵element属性来实现这一点，例如：

colum.setAttribute('was-sorted', 'false');

或通过切换类：

column.classList.toggle('sorted');

Answer 1

如果我理解您的问题，则可以通过以期望的行为向callback发起呼叫来实现您想要的目标：

constructor(callback) {
    this.column.textContent = 'sort ascending / descending';
    this.column.addEventListener('click', function(ev) {
        // Your desired code here

        // Call the callback
        callback(ev);
    });
}

Answer 2

您可以包装回调函数并将其传递给'addEventListener'函数。

class TableColumn {

    column = document.createElement('th');
    clickState = false;

    constructor(callback) {
        this.column.textContent = 'sort ascending / descending';
        this.column.addEventListener('click', (...args) => {
            // your code here
            callback(...args);
        });
    }

}

Answer 3

除了修改函数外，典型的方法是创建该函数的唯一实例，例如：

class TableColumn {

    column = document.createElement('th');
    clickState = false;

    constructor(callback, params) {
        let innerCallback = (params) => callback(params);

        this.column.textContent = 'sort ascending / descending';
        this.column.addEventListener('click', innerCallback);
    }

}

编辑： 发布的其他两个答案在功能上基本相同，这取决于您希望格式化代码的方式。但是最终，所有三个答案都是相同的。就个人而言，我更喜欢使用命名函数，这样，如果您添加了另一个eventHandlers，则无需重复任何代码-您可以重复使用相同的innerCallback回调

编辑2 ：要显示如何扩展innerCallback功能，请参见下文。

class TableColumn {

    column = document.createElement('th');
    clickState = false;

    constructor(callback, params) {
        let innerCallback = (params) => {
            /* Do stuff here*/

            callback(params)
        };

        this.column.textContent = 'sort ascending / descending';
        this.column.addEventListener('click', innerCallback);
    }

}

是否可以修改作为参数传递给类的方法

3 个答案: