这个关键字引用在 Javascript 中

Program：

<html>
...
<button class="accordion">Section 1</button>
<div class="panel"> <p> .... </p> </div>
<button class="accordion">Section 2</button>
<div class="panel"> <p> .... </p> </div>
<button class="accordion">Section 3</button>
<div class="panel"> <p> .... </p> </div>
<script>
        var acc = document.getElementsByClassName("accordion");
        var i;
        for (i = 0; i < acc.length; i++) {
            acc[i].onclick = function(){
                this.classList.toggle("active");
                this.nextElementSibling.classList.toggle("show");
          }
        }
</script>
...
</html>

我是javascript的新手。所以，我无法理解上面的javascript代码。我希望"这个"关键字指的是窗口对象。因为，它是在匿名函数中调用的，并且该函数也没有对象。但是，它指的是对象 "HTMLButtonElement"。"this"如何指按钮对象？

"this"如何指按钮对象？

每个函数都有自己的作用域，自己的this引用。

 acc[i].onclick = function(){
            this.classList.toggle("active");
            this.nextElementSibling.classList.toggle("show");
      }

此function是 acc[i] 上的事件处理程序，它是具有类 accordion 的button。所以，这是指向 DOM 对象指向HTMLButtonElement指向acc[i]<</p>

div class="one_answers">

这个关键字基本上是指它在这里作为事件处理程序扮演角色的当前对象

this是指当前execution context，在您的情况下是指它的按钮。如果您希望它引用window，请保留对它的引用，然后在onClick处理程序中使用它。

如果你运行小提琴，你可以看到结果。

 var acc = document.getElementsByClassName("accordion");
        var i; 
        var that = this;
        for (i = 0; i < acc.length; i++) {
            acc[i].onclick = function(){
                alert(this);
                alert(that);
                this.classList.toggle("active");
                this.nextElementSibling.classList.toggle("show");
          }
        }

https://jsfiddle.net/g1s0r9as/

相关内容

最新更新

热门标签：