js问题，为什么我把 Btns[i].index = i;放在onclick里面就是未定义？

<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <script>
            window.onload = function () {
                  var Btns = document.getElementsByTagName("button");
                  for (i = 0; i < Btns.length; i++) {
                        
                        Btns[i].onclick = function () {
                              Btns[i].index = i;
                              //为什么把这个放在里面就是未定义？？
                              alert(this.index);
                        }
                  }
            }
      </script>
</head>

<body>
      <button>按钮1</button>
      <button>按钮2</button>
      <button>按钮3</button>

</body>

</html>

为什么只能把这Btns[i].index = i;放在 Btns[i].onclick = function () 外面就可以？放在里面就不行？

怎样从逻辑上去解释？

作用域的问题，用let

作用域的问题