javascript - 如何在函数中为 this.setattribute 传递参数？

Question

所以我正在学习 javascript(？)，我遇到了这种情况，我真的找不到直接的答案。

所以我在一个 html 页面中有这些段落，我想为其更改背景颜色，我正在使用的代码是这样的:

var colors=['red','pink','blue'];

var div2paragraphs = document.querySelectorAll('#div2 p')

for (let paragraph = 0; paragraph < div2paragraphs.length; paragraph++) {
    (function(paragraph) {
    div2paragraphs[paragraph].onmouseover = function(){
    this.setAttribute('style', `background-color: ${colors[paragraph]}`)}
    div2paragraphs[paragraph].onmouseout = function(){
    this.setAttribute('style', 'background-color: white')}
    })(paragraph);
}

我也不太明白这里发生了什么，我只是想用整个“function(){}”来做这件事(据说是匿名函数？)，但显然有一种叫做javascript 中的 IIFE，因此您必须包装函数并传递一个唯一变量以使其每次都在循环中运行，但我仍然不明白为什么我必须以“(段落)”结尾。

我在想是否可以通过为每个 setAttribute 操作创建一个函数来做同样的事情，所以我试着这样写:

var colors=['red','pink','blue'];

var div2paragraphs = document.querySelectorAll('#div2 p')

function changeToColor(color) {
    this.setAttribute('style', 'background-color: ' + color);
}

function changeBackWhite() {
    this.setAttribute('style', 'background-color: white');
}

for (let paragraph = 0; paragraph < div2paragraphs.length; paragraph++) {
    div2paragraphs[paragraph].onmouseover = changeToColor('red');
    div2paragraphs[paragraph].onmouseout = changeBackWhite;
}

但无论我做什么，它总是会出现错误:

Uncaught TypeError: this.setAttribute is not a function

或类似的东西。我认为这与这些情况有关，如果您添加括号，它会在执行其他任何操作之前调用该函数？所以它不知道“这个”是什么？我不太明白，但无论如何我对如何用单独的函数编写我在上面所做的同样的事情一无所知。有人能够阐明这一点......吗？

我更习惯使用 Python，所以显然有一些不同的基本概念......

PS:下面这两个例子有什么区别？

for (let paragraph = 0; paragraph < div2paragraphs.length; paragraph++) {
    div2paragraphs[paragraph].onmouseover = function() {
        this.style['background-color'] = colors[paragraph];
    }
    div2paragraphs[paragraph].onmouseout = function() {
        this.style['background-color'] = 'white';
    }
}

还有这个

for (let paragraph = 0; paragraph < div2paragraphs.length; paragraph++) {
    div2paragraphs[paragraph].onmouseover = function(){
        this.setAttribute('style', `background-color: $(colors[paragraph]`)
    }
    div2paragraphs[paragraph].onmouseout = function(){
        this.setAttribute('style', 'background-color: white')
    }
}

为什么第一个(由 ibrahim mahrir 提供)有效而第二个无效？

Answer 1

在第一个代码示例中，IIFE循环内部是完全无用的，因为您已经在使用尊重 block 作用域的 let，所以 this problem不会发生。以下代码可以正常工作:

for (let paragraph = 0; paragraph < div2paragraphs.length; paragraph++) {
    div2paragraphs[paragraph].onmouseover = function() {
        this.style['background-color'] = colors[paragraph];
    };
    div2paragraphs[paragraph].onmouseout = function() {
        this.style['background-color'] = 'white';
    };
}

注意:您不需要使用setAttribute 来设置style 属性。直接做就行了。

演示:

var colors=['red','pink','blue'];

var div2paragraphs = document.querySelectorAll('#div2 p');

for (let paragraph = 0; paragraph < div2paragraphs.length; paragraph++) {
    div2paragraphs[paragraph].onmouseover = function() {
        this.style['background-color'] = colors[paragraph];
    };
    div2paragraphs[paragraph].onmouseout = function() {
        this.style['background-color'] = 'white';
    };
}

<div id="div2">
    <p>AAAA</p>
    <p>BBBB</p>
    <p>CCCC</p>
</div>

---

至于第二个代码示例，您的函数需要返回其他函数以指定为事件监听器。例如 changeColor 应该这样定义:

function changeToColor(color) {
    return function() {
        this.style['background-color'] = color;
    }
}

changeColor 返回的匿名函数将被分配给事件监听器。在您的代码中，changeColor 未返回任何内容，因此 undefined 已附加到事件监听器。此外，changeColor 本身不是事件监听器(它只是一个创建事件监听器并返回它的函数)，所以它里面的 this 将是全局对象 窗口。 window 没有名为 setAttribute 的方法，因此出现错误。

此外，您不需要 changeBackWhite，您可以对两者都使用 changeColor(由 closures 提供)，如下所示:

for (let paragraph = 0; paragraph < div2paragraphs.length; paragraph++) {
    div2paragraphs[paragraph].onmouseover = changeToColor(colors[paragraph]);
    div2paragraphs[paragraph].onmouseout = changeToColor('white');;
}

演示:

var colors=['red','pink','blue'];

var div2paragraphs = document.querySelectorAll('#div2 p');

function changeToColor(color) {
    return function() {
        this.style['background-color'] = color;
    }
}

for (let paragraph = 0; paragraph < div2paragraphs.length; paragraph++) {
    div2paragraphs[paragraph].onmouseover = changeToColor(colors[paragraph]);
    div2paragraphs[paragraph].onmouseout = changeToColor('white');;
}

<div id="div2">
    <p>AAAA</p>
    <p>BBBB</p>
    <p>CCCC</p>
</div>