Question

程序：

<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代码。我希望“this”关键字指的是窗口对象。因为，它在匿名函数中被调用，并且该函数也没有对象。但是，它指的是对象“HTMLButtonElement”。 “this”如何引用Button对象？

Answer 1

“this”如何引用Button对象？

每个函数都有自己的范围，它自己的this引用。

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

此function是acc[i]上的事件处理程序，它是button，类accordion。因此，这指向指向HTMLButtonElement

的acc[i]的DOM对象

Answer 2

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

Answer 3

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/

Javascript中的这个关键字引用

3 个答案: