关于this 指向 ‘a’

Question

老师，视频里您提到普通绑定中 this.innerHTML 指向的是btn1，而代理绑定中 this.innerHTML 指向的是 a 标签而不是div3，这里我不太明白为什么，是因为判定的时候是通过 fn是否为null 吗？
我的理解是如果：
1. fn为null， 则为普通绑定，this指向的就是这个elem
2. fn不为null则为代理绑定，this指向的就是selector

麻烦老师指出我理解哪里出了问题

Answer 1

双越 2021-04-12 21:27:34

this 指向哪里，关键看 call 方法，你在代码中找一下。

• 提问者 别喷了我很菜 #1

  好的，我再看一下

Answer 2

双越 2021-04-12 17:15:03

把相关代码贴出来吧。

• 提问者 别喷了我很菜 #1

  老师，相关代码就是视频里面所演示的： 
  
  function bindEvent(elem, type, selector, fn) {
      if (fn == null) {
          fn = selector
          selector = null
      }
      elem.addEventListener(type, event => {
          const target = event.target
          if (selector) {
              // 代理绑定
              if (target.matches(selector)) {
                  fn.call(target, event)
              }
          } else {
              // 普通绑定
              fn.call(target, event)
          }
      })
  }
  // 普通绑定
  const btn1 = document.getElementById('btn1')
  bindEvent(btn1, 'click', function (event) {
      // console.log(event.target) // 获取触发的元素
      event.preventDefault() // 阻止默认行为
      alert(this.innerHTML)
  })
  
  // 代理绑定
  const div3 = document.getElementById('div3')
  bindEvent(div3, 'click', 'a', function (event) {
      event.preventDefault()
      alert(this.innerHTML)
  })