javascript - 为什么我不能通过下面的功能访问“this”？

Question

var colors = ['red', 'blue', 'green'];
var ps = document.querySelectorAll('p');
for(var i = 0; i < ps.length; i++){
    ps[i].addEventListener('click', function(){
        var j = 0;
        return function(){
            this.style.color = colors[j];
            j++;
            if(j == 3)
                j = 0;
        }
    })
}

我想在我的所有段落上添加点击事件，以便它们通过改变颜色对点击做出独立反应

Answer 1

每个函数都有它自己的上下文 ( this)。当您创建新函数时，它有自己的上下文。您可以使用箭头功能- 它没有单独的上下文并保留一个来自父级的内部。或者您可以使用bind为您的新功能分配一些特定的上下文。我强烈建议您使用bind，因为箭头功能被过度使用，并且很难理解正在发生的事情。

编辑：在@VLAZ的推荐中查看更精确的描述 - 这很重要