如何在interact.js的onmove事件中修改父对象的属性？

你完全找对了问题的根源——onMove回调里的this指向确实不对！当interact.js触发onmove事件时，回调函数里的this默认指向的是interact内部的交互对象，而不是你的MyObject实例，所以自然没法修改attribute属性。下面给你几种简单有效的解决方法：

方法1：使用箭头函数 #

箭头函数不会绑定自己的this，它会继承外层作用域的this（也就是MyObject的实例），这样就能直接访问并修改attribute属性：

function MyObject() {
  this.attribute = 0;
  // 将onMove改为箭头函数
  const onMove = (event) => {
    this.attribute = 1;
  };
  const draggable = interact('#draggable');
  draggable.draggable({
    onmove: onMove
  });
}
let testObject = new MyObject()
document.querySelector('#draggable').addEventListener('click', () => {
  document.querySelector('#result').innerHTML = testObject.attribute;
});

方法2：使用bind()绑定this #

通过bind()方法可以把onMove函数的this固定为当前的MyObject实例，这样回调执行时就会指向正确的对象：

function MyObject() {
  this.attribute = 0;
  function onMove(event) {
    this.attribute = 1;
  }
  const draggable = interact('#draggable');
  draggable.draggable({
    // 绑定this到当前MyObject实例
    onmove: onMove.bind(this)
  });
}
let testObject = new MyObject()
document.querySelector('#draggable').addEventListener('click', () => {
  document.querySelector('#result').innerHTML = testObject.attribute;
});

方法3：保存实例引用到变量 #

把当前MyObject实例的引用存到一个变量（比如self或that），然后在回调里使用这个变量来访问属性，这是传统且可靠的解决方案：

function MyObject() {
  const self = this; // 保存当前实例的引用
  self.attribute = 0;
  function onMove(event) {
    self.attribute = 1; // 使用self代替this
  }
  const draggable = interact('#draggable');
  draggable.draggable({
    onmove: onMove
  });
}
let testObject = new MyObject()
document.querySelector('#draggable').addEventListener('click', () => {
  document.querySelector('#result').innerHTML = testObject.attribute;
});

任意选择一种方法修改后，拖动#draggable元素再点击它，#result里的内容就会变成1了。

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