Question

我完全被这种代码的部分弄糊涂了，这似乎没有任何作用。就是这样：

// in app.js
import {layoutItemButtonClick} from '/blablaWrappeur.js'
document.addEventListener('DOMContentLoaded', function () {


    var element = document.querySelector('.qq-element') //this is a html element obj

    $('.layout-item-button').click(layoutItemButtonClick)
})

//in blablaWrappeur.js
export const layoutItemButtonClick = function () {
    const selectedLayout = this.dataset.layout.split("")
    doQqthing(element) // element is not defined

}

function doQqthing(element) {
    alert(element) /// not defined
}

我需要将元素和单击按钮的this上下文传递给layoutItemButtonClick函数，然后在其中传递给doQqthing函数。

但是，它不能像这样工作。

1）如果我让这样的代码并单击按钮，则什么也没发生。

2）现在，如果我将click函数更改为此（将paranthese添加到函数调用中：

$('.layout-item-button').click(function () {
        layoutItemButtonClick()
    })

我遇到dataset is not defined错误。

3）：如果我将其更改为此：

 $('.layout-item-button').click(layoutItemButtonClick())

我遇到同样的错误。

4）为此：

$('.layout-item-button').click(layoutItemButtonClick)

我收到一个element is not defined错误。

我知道，如果我在函数内部调用该函数，则 this 将是当前元素，并且如果在单击括号内（如3）和4）那样，它将是本地范围。因此，如何将元素和this从click传递到函数中。

为什么在调用定义为常量的函数时使用括号有何不同？

谢谢。

Answer 1

为什么在调用定义为常量的函数时使用括号有何不同？

layoutItemButtonClick就像其他任何变量访问一样。它解析为作为函数对象的变量的值。

layoutItemButtonClick() otoh 调用该函数并解析为其返回值。

因此

 $('.layout-item-button').click(layoutItemButtonClick())

将layoutItemButtonClick（即undefined）的返回值传递给.click，而

 $('.layout-item-button').click(layoutItemButtonClick())

将功能对象本身传递给.click。

我收到一个element is not defined错误。

这是正确的，因为element没有在layoutItemButtonClick可以访问的范围中定义。它仅在DOMContentLoaded事件处理程序中定义。

您必须将element作为参数传递给layoutItemButtonClick。因此，该函数应声明为

export const layoutItemButtonClick = function(element) { ... }

现在，我们需要调用layoutItemButtonClick，以使this引用被单击的元素，然后将element作为参数传递。我们可以使用.call：

$('.layout-item-button').click(function() {
    layoutItemButtonClick.call(this, element);
});

但是，不需要在this内使用layoutItemButtonClick。我们可以将触发事件的元素设为显式参数：

 export const layoutItemButtonClick = function(trigger, element) {
   const selectedLayout = trigger.dataset.layout.split("")
   doQqthing(element);
 };

并命名为

$('.layout-item-button').click(function() {
    layoutItemButtonClick(this, element);
});

将此和变量传递给导入的函数onclick

1 个答案: