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

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);
}
}

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

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);
}
}

编辑：发布的其他两个答案在功能上与此基本相同，这取决于您喜欢如何格式化代码。但最终，这三个答案都是相同的。就个人而言，我更喜欢使用命名函数，这样如果您添加了另一个事件处理程序，则无需复制任何代码 - 您可以重复使用相同的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);
}
}