隐式绑定在dom方法引用中易失效，因“谁调用，this指向谁”，一旦方法被提取（如赋值、传参），this丢失原dom上下文；安全做法是用event.target/currenttarget、显式绑定或闭包。
隐式绑定在 DOM 节点方法引用中容易出问题，核心在于“谁调用，this 就指向谁”——但一旦方法被提取出来单独使用，this 就会丢失原本的 DOM 元素上下文。
隐式绑定失效的典型场景
当把 DOM 元素的方法（比如 element.addEventListener 的回调）赋值给变量、传入其他函数，或作为参数传递时，就脱离了对象调用形式，不再满足隐式绑定条件。
-
const handleClick = btn.onclick;→handleClick()调用时 this 指向全局对象（非严格模式）或undefined（严格模式） -
setTimeout(btn.click, 100)→btn.click被当作普通函数调用，this 不再是btn -
list.forEach(item => item.addEventListener('click', handler))中若handler内部依赖this，而它没绑定到具体元素，实际执行时 this 为undefined或window
DOM 方法里 this 的真实指向
在事件处理函数中，隐式绑定通常不来自你写的函数本身，而是浏览器自动设置的：当事件触发，回调执行时，this 默认指向绑定事件的那个 DOM 元素（前提是用 addEventListener 或 onclick 属性直接赋值）。
-
btn.onclick = function() { console.log(this); };→this是btn -
btn.addEventListener('click', function() { console.log(this); });→this是btn - 但
const fn = btn.onclick; fn();→this不再是btn，因为调用形式变了
安全保留 this 的常用做法
避免依赖隐式绑定，改用显式控制 this 或更可靠的替代方式：
- 用箭头函数（不绑定 this，继承外层作用域）→ 适合访问外部变量，但不能靠它拿到事件目标元素
- 用
event.target或event.currentTarget替代 this：它们始终指向触发事件的元素或监听器绑定的元素，不受调用方式影响 - 显式绑定：
btn.addEventListener('click', handler.bind(btn))或btn.addEventListener('click', () => handler.call(btn)) - 封装成闭包：
btn.addEventListener('click', () => handler(btn))，把 DOM 元素作为参数传入
特别注意 jQuery 和旧式写法的差异
jQuery 的 .click(fn) 内部会确保 this 指向当前匹配的 DOM 元素，但它本质是手动做了 fn.call(element)。纯原生环境下没有这种保障，不能假设“写了方法就一定有正确的 this”。
-
$('#btn').click(function(){ console.log(this); });→this是原生 DOM 元素（jQuery 自动绑定） -
document.getElementById('btn').click = function(){ console.log(this); };→ 只有触发 click 事件时才生效，且该属性不用于监听，而是模拟点击 - 真正监听请用
addEventListener，并优先用event.currentTarget取代 this 防止意外丢失
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
