【记录问题】自己在写代码中遇到的问题（this）

1、一开始制作轮播图中遇到className属性不生效的问题（实则是this的问题）

HTML代码段

 <div class="focus ">
                
                <ol class="circle">

                </ol>
        </div>

css代码段

.circle {
  position: absolute;
  bottom: 10px;
  left: 50px;
}
.current {
  background-color: #fff;
}
.circle li {
  float: left;
  width: 8px;
  height: 8px;
  /*background-color: #fff;*/
  border: 2px solid rgba(255, 255, 255, 0.5);
  margin: 0 3px;
  border-radius: 50%;
  /*鼠标经过显示小手*/
  cursor: pointer;
}

使用js创建的o标签里面的li标签

let ul = focus.querySelector('ul');
let ol=this.document.querySelector('.circle');
    for (let i=0;i<ul.children.length;i++){
        // 建立小圆点用的元素li
        let li=this.document.createElement('li');
        ol.appendChild(li);        
        li.addEventListener('click', () =>{
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'current';
        })   
    }

样图

 最初想实现的需求是点住哪一个圆圈，那个圆圈就填充底色；在js代码块中创建并添加li元素，使用排他思想，点击触发将所有的li元素底色清空，而后使用className属性进行添加类，但是无法生效。

一开始我觉是将事件写在循环内出问题，所以我将事件写到循环外部

let ul = focus.querySelector('ul');
    //获取ol，用来装小圆点
    let ol=this.document.querySelector('.circle');
    for (let i=0;i<ul.children.length;i++){
        // 建立小圆点用的元素li
        let li=this.document.createElement('li');
        //将小圆点装在ol中
        ol.appendChild(li);              
    }
    
    ol.children[0].className = 'current';
    let li=ol.querySelectorAll('li');
    for(let j=0;j<li.length;j++){
     
       li[j].addEventListener('click',()=>{
            for(let x=0;x<li.length;x++){
                li[x].className='';
            }
           li[j].className='current';
       })
        
    }

同样也达到了效果

可是后来想到为什么别人可以在循环内部成功呢？我一度以为是箭头函数的问题。如果成立，有不符合现在的结果。我又进行了调试 ；在调试中我对this进行了输出

输出的竟然是Window对象，

而后我将this更改为了li，却是可以达到需求的功能。

看似解决了问题，然而更加费解，因为我看见过别人是有使用的是this也可以完成；

我参照代码，发现不同之处，就是在前面被我否定的箭头函数的问题。

li.addEventListener('click', function(){
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }          
            this.className = 'current';                    
        })  

 我将箭头函数更改为function创建的方式

 很显然，当使用function创建函数使用this是可行的，而当使用箭头函数创建使用this却无法生效。