事件监听函数中的this

蔚落 2022-10-02 09:57 149阅读 0赞

特别简单的一个html结构

测试需求为点击显示this指向

1.  直接在标签中调用

<div class="test1" onclick="t();">
    			
    </div>
    
    function t(){
    			console.log(this);
    }

浏览器控制台结果  
![结果][20190617200207838.png]  
![示意图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzI3MDg4MjUz_size_16_color_FFFFFF_t_70]  
在这种情况下，相当于告诉浏览器去找到t函数，然后执行它，t函数在全局对象空间中，所以this指向window  
2. 普通匿名函数

var test = document.querySelector('.test');
    test.addEventListener('click',function(event){
    	console.log(this);
    });

浏览器控制台结果  
![结果][20190617190746939.png]  
3. 箭头函数

var test = document.querySelector('.test');
    test.addEventListener('click',()=>{
    		console.log(this);
    });

浏览器控制台结果  
![箭头函数结果][20190617190907404.png]  
**分析**  
普通的匿名函数中this指向触发事件的元素  
箭头函数由于不会创建自己的this，它只能从作用域链的上层继承this，所以this指向全局对象window

参考资料：[https://www.quirksmode.org/js/this.html][https_www.quirksmode.org_js_this.html]  
[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this\#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E4%B8%AD%E7%9A%84\_this][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Operators_this_E6_9E_84_E9_80_A0_E5_87_BD_E6_95_B0_E4_B8_AD_E7_9A_84_this]  
[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arrow\_functions\#%E5%83%8F%E6%96%B9%E6%B3%95%E4%B8%80%E6%A0%B7%E4%BD%BF%E7%94%A8%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Functions_arrow_functions_E5_83_8F_E6_96_B9_E6_B3_95_E4_B8_80_E6_A0_B7_E4_BD_BF_E7_94_A8_E7_AE_AD_E5_A4_B4_E5_87_BD_E6_95_B0]

[20190617200207838.png]: /images/20220113/eca5f31fc5a04a1c9453201ee1c19c71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzI3MDg4MjUz_size_16_color_FFFFFF_t_70]: /images/20220113/83c91f8008984b8d88fd40640bc08968.png
[20190617190746939.png]: /images/20220113/d963c734edeb4ddc81a9cbbe2aa0d2eb.png
[20190617190907404.png]: /images/20220113/56c8dedb912a4e08b7494c0f047e77a3.png
[https_www.quirksmode.org_js_this.html]: https://www.quirksmode.org/js/this.html
[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Operators_this_E6_9E_84_E9_80_A0_E5_87_BD_E6_95_B0_E4_B8_AD_E7_9A_84_this]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E4%B8%AD%E7%9A%84_this
[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Functions_arrow_functions_E5_83_8F_E6_96_B9_E6_B3_95_E4_B8_80_E6_A0_B7_E4_BD_BF_E7_94_A8_E7_AE_AD_E5_A4_B4_E5_87_BD_E6_95_B0]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arrow_functions#%E5%83%8F%E6%96%B9%E6%B3%95%E4%B8%80%E6%A0%B7%E4%BD%BF%E7%94%A8%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0