this 指向4 — 事件处理函数中的 this

用户9914333

发布于 2022-07-22 14:35:13

84600

代码可运行

文章被收录于专栏：bug收集bug收集

运行总次数：0

代码可运行

本文继续讨论 this 指向问题，今天讨论：

事件处理函数中的 this

文末尾有关于this的面试题，可直接查看

0 1

事件处理函数中的 this

示例1：

<button id="btnTest" onclick="console.log(this)">Test</button>
<button id="btnTest2" onclick="(function(){console.log(this)})()">
Test2</button>

点击结果为：

示例2：

  //场景1
  let btn  = document.getElementById("btnTest");
  btn.onclick = function (){
    console.log(this);
  }
  
  //场景2
  let btn2  = document.getElementById("btnTest2");
  btn2.addEventListener('click',function (){
    console.log(this);
  })
  
  //场景3
  let btn3  = document.getElementById("btnTest3");
  btn3.addEventListener('click',handleClick)
  function handleClick(){
    console.log(this);
  }

结果均为: 触发事件的DOM元素

示例3：

 ;(function (doc){
    let oBtn = doc.getElementById('btnAdd');
    function Plus(a,b){
      this.a = a;
      this.b = b;
      this.init();
    }
    Plus.prototype.init=function (){
      this.bindEvent();
    }
    Plus.prototype.bindEvent = function (){
      oBtn.addEventListener('click',this.handlerBtnClick,false);
    }
    Plus.prototype.handlerBtnClick = function (){
      console.log(this);
      console.log(this.a ,this.b);
    }
    window.Plus = Plus;
  })(document)

  new Plus(3,4);

结果为：

总结：

事件函数处理内部的this, 总是指向被绑定的DOM元素

0 2

改变函数内部this指向

问题：如何让 handlerBtnClick 内this指向类的实例

方法一：

oBtn.addEventListener('click',this.handlerBtnClick,false);

方法二：

 _self = this;

Plus.prototype.handlerBtnClick = function (){
      console.log(_self );
      console.log(_self .a ,_self .b);
}

0 3

面试题

看了this的各种情况，大家应该比较了解吧，

下面我们就来看一道关于 this 的面试题

以下输出的值，并简述

var foo={
      bar:function(){
           console.log(this)
     }
}
foo.bar()
(foo.bar)()
(foo.bar=foo.bar)()
(foo.bar,foo.bar)()
(false || foo.bar)()

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-05-22，如有侵权请联系 cloudcommunity@tencent.com 删除

dom