创建HoverIntent构造函数绑定鼠标事件时，this.elem在方法中无法识别

你遇到的核心问题是函数的this绑定丢失了。当你把new HoverIntent(elem).over作为事件监听器传递给addEventListener时，这个over函数的this不再指向HoverIntent的实例，而是会指向触发事件的DOM元素（也就是elem本身）。所以在over方法里访问this.elem自然会报错——因为此时this就是elem，它并没有elem这个属性。

有几种简单的方法可以修复这个问题，下面列举最常用的两种：

方法1：在构造函数中使用bind绑定this #

在构造函数里，把over和out方法的this绑定到当前实例上，这样无论这些方法被如何调用，this都会指向HoverIntent的实例：

function HoverIntent(elem) {
  this.elem = elem;

  // 绑定this到实例，确保方法内的this指向当前HoverIntent对象
  this.over = function() {
    var tooltip = document.createElement('div');
    tooltip.className = "tooltip";
    tooltip.innerHTML = "some-usefull-text";
    tooltip.style.left = this.elem.getBoundingClientRect().left + 'px';
    tooltip.style.top = (this.elem.getBoundingClientRect().bottom + 5) + 'px';
    document.body.appendChild(tooltip);
  }.bind(this);

  this.out = function() {
    var current = document.getElementsByClassName('tooltip')[0];
    if (current) { // 增加判断，避免找不到tooltip时调用removeChild报错
      document.body.removeChild(current);
    }
  }.bind(this);
};

const elem = document.getElementById('elem');
elem.addEventListener('mouseover', new HoverIntent(elem).over);
elem.addEventListener('mouseout', new HoverIntent(elem).out);

方法2：使用ES6箭头函数（推荐，更简洁） #

箭头函数的this是词法作用域，会自动继承外层作用域的this（也就是构造函数中的实例），所以不需要额外绑定：

function HoverIntent(elem) {
  this.elem = elem;

  // 箭头函数自动继承构造函数内的this指向
  this.over = () => {
    var tooltip = document.createElement('div');
    tooltip.className = "tooltip";
    tooltip.innerHTML = "some-usefull-text";
    tooltip.style.left = this.elem.getBoundingClientRect().left + 'px';
    tooltip.style.top = (this.elem.getBoundingClientRect().bottom + 5) + 'px';
    document.body.appendChild(tooltip);
  };

  this.out = () => {
    var current = document.getElementsByClassName('tooltip')[0];
    if (current) {
      document.body.removeChild(current);
    }
  };
};

const elem = document.getElementById('elem');
elem.addEventListener('mouseover', new HoverIntent(elem).over);
elem.addEventListener('mouseout', new HoverIntent(elem).out);

• 我给out方法加了if (current)判断，避免当页面上没有tooltip元素时调用removeChild抛出错误。
• 计算top值时用括号包裹了this.elem.getBoundingClientRect().bottom + 5，确保数值先相加再拼接单位，避免出现类似1005px的错误（原写法会把数值和5直接拼接成字符串）。

内容的提问来源于stack exchange，提问作者Sviat Kuzhelev