差点被JS作用域的问题打脸

话说今天帮同事画一个H5页面，看了一下UI，几张图片加文本还有几个按钮，看着就像分分钟可以搞定的样子，于是就接了下来
前面布局都写的很嗨皮，到最后给一个按钮绑定点击事件的时候，一直报错，提示方法未定义，一时间也是没明白，
代码是这样的:

 <div class="bottome">
        <span style="flex: 0.95">
          <span class="money">¥
            <span style="font-size: 20px">200.00</span>
          </span>
          <span class="promise">保证金</span>
        </span>
        <div class="baoming" onclick="signUp()">立即报名</div>
  </div>


<script type="text/javascript">

  window.onload = () => {
    function signUp() {
      console.log("报名。。。");
      document.getElementsByClassName("alert-wrap")[0].style.display = 'flex';
    }
  
  }

</script>

下面是报错提示:

image.png

后来我把方法放到外面正常了

<script type="text/javascript">

  window.onload = () => {
    function signUp() {
      console.log("报名。。。");
      document.getElementsByClassName("alert-wrap")[0].style.display = 'flex';
    }
  
  }

</script>

机智的我马上想到了是不是作用域的问题？经过验证还真是。

加上window.onload后改变了signUp（）函数的作用域，使其成为内部函数，故而onclick=”signUp()“无法访问到这个函数，而放到外面signUp()是绑定在window上的，所以onclick=”signUp()“能够访问到。
其实就是window.onload = function(){};是一个作用域，当我们点击调用方法的时候是访问的全局作用域，结果当然是报错啦。
解决办法:
1、将绑定的方法写到全局作用域。
2、在window.onload 作用域内部给按钮绑定点击事件。

 const button = document.getElementsByClassName("baoming")[0];
    button.onclick = ()=>{
      console.log("报名。。。");
      const baoming = document.getElementsByClassName("alert-wrap")[0].style.display = 'flex';
    }

3、对象.函数(方法)

 const button = document.getElementsByClassName("baoming")[0];
    button.signUp =  ()=> {
      console.log("报名。。。");
      const baoming = document.getElementsByClassName("alert-wrap")[0].style.display = 'flex';
    }