on方法内调用this.text()报TypeError，外部调用正常问题咨询

这个问题的核心是事件回调函数中的this指向发生了变化，导致你在on方法内部调用this.text()时，this已经不是你预期的对象实例，而是触发事件的DOM元素（比如按钮本身），而原生DOM元素并没有你定义的text()方法，所以才会抛出这个错误。

为什么外部调用正常？ #

在on方法外部，this指向的是你的函数/对象实例，这个实例上有你定义的text()方法，所以调用正常。但当你把函数作为事件回调传入on方法时，浏览器会在触发事件时，将回调函数的this绑定到触发事件的DOM节点上，这是JavaScript事件处理的默认行为。

几种解决方法 #

1. 提前保存外部的this到变量

在事件回调外部，把当前的this存到一个变量（比如self、that），然后在回调里用这个变量来调用方法：

// 示例代码结构
function createButtonContainer() {
  // 保存外部的this
  const self = this;
  
  // 创建按钮并绑定事件
  const btn = document.createElement('button');
  btn.onclick = function() {
    // 用self代替this，指向原来的对象实例
    console.log(self.text()); 
  };
  
  // ...其他创建容器的逻辑
  return { container: /* 容器元素 */, buttonIds: /* 按钮ID数组 */ };
}

2. 使用箭头函数作为事件回调

箭头函数不会绑定自己的this，它会继承外层作用域的this，所以可以直接使用：

function createButtonContainer() {
  const btn = document.createElement('button');
  // 箭头函数继承外部的this
  btn.onclick = () => {
    console.log(this.text()); 
  };
  
  // ...其他逻辑
  return { container: /* 容器元素 */, buttonIds: /* 按钮ID数组 */ };
}

3. 使用bind()绑定this到回调函数

通过bind()方法，手动将回调函数的this绑定到你预期的对象实例：

function createButtonContainer() {
  const btn = document.createElement('button');
  
  // 定义回调函数
  function handleClick() {
    console.log(this.text()); 
  }
  
  // 绑定this后再赋值给事件
  btn.onclick = handleClick.bind(this);
  
  // ...其他逻辑
  return { container: /* 容器元素 */, buttonIds: /* 按钮ID数组 */ };
}

额外提示 #

如果你是用jQuery的on方法绑定事件，原理也是一样的：jQuery事件回调里的this默认指向触发事件的DOM元素，所以同样可以用上面的三种方法来解决。

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