轮播图点击按钮无效：为什么我的`onclick`事件中的`this`指向了`window`而不是按钮？

points[i].onclick = function () {
  index = this.index
  chageall();
};

points[i].onclick = function () {
  chageall(i);
};

function chageall(index) {
  // ...
}

points[i].onclick = function () {
  chageall.bind(this, i)();
}.bind(points[i]);

/*
 * 需求
       1. 默认自动轮播状态  小圆点跟随推片变化而变化
       2. 触发状态  当鼠标悬浮小圆点发生样式改变并且不在轮播
               当鼠标进行点击的时候，对应小圆点的图片发生改变
       3.鼠标悬浮左右按键的时候，图片不在轮播
           当点击的时候，会根据当前图片的位置发生往后或往前的变化        
 */
window.onload = function () {

  //1.进行元素的获取 
  // 获取图片
  let imgs = document.querySelectorAll("#img-list li ");
  // 获取小圆点
  let points = document.querySelectorAll("#points a");
  // 获取左右按钮
  let btns = document.querySelectorAll(".btn");
  // 定义当前显示的下标
  let index = 0;
  // 定义timer
  let timer;

  //2.设计方法让所有的图片隐藏
  function hiddenImages() {
    for (let i = 0; i < imgs.length; i++) {
      imgs[i].style.opacity = 0;
    }
  }


  //  3.设计方法让所有的小圆点处于隐藏的状态
  function hiddenPoints() {
    for (let i = 0; i < points.length; i++) {
      points[i].className = "hd";
    }
  }


  // 4.设计方法让小圆点显示和图片的显示都处于隐藏状态并且根据当前设置的下标来进行显示
  function chageAll(i) {
    hiddenImages();
    hiddenPoints();
    imgs[i].style.opacity = 1;
    points[i].className = "highlight";
  }


  // 5.设计轮播方法
  function carousel() {
    timer = setInterval(function () {
      chageAll(index);
      index++;
      // 判断如果下标超出了就回到第一张
      if (index > imgs.length - 1) {
        index = 0;
      }

    }, 3000)
  }
  carousel();

  // 6.进行小圆点的触发
  for (let i = 0; i < points.length; i++) {

    // 悬浮进行定时器停止
    points[i].onmouseover = function () {
      clearInterval(timer);
    };
    // 鼠标离开继续轮播
    points[i].onmouseout = function () {
      carousel();
    };

    points[i].index = i;

    points[i].onclick = chageAll.bind(points[i], i);
  }



};