ES6中窗口加载与resize时执行方法的问题排查

嘿，我一眼就揪出问题啦——这是典型的**this指向绑定错误**导致的！

为啥checkSize没法正常执行？ #

当你直接把this.checkSize传给resize事件监听时，事件触发时this的指向会变成触发事件的对象（也就是window），而不是你的thisDiv类实例。这时候this.element就等同于window.element，自然找不到你要操作的DOM元素，方法也就跑不起来了。

几种靠谱的修复方案 #

方案1：用箭头函数保留this指向

箭头函数会自动继承外层作用域的this，直接在resize回调里用它调用checkSize就行：

events() {
  this.window.resize(() => this.checkSize());
}

方案2：用bind强制绑定this

通过bind方法把checkSize的this固定为类实例，确保回调执行时指向正确：

events() {
  this.window.resize(this.checkSize.bind(this));
}

方案3：在构造函数里提前绑定方法

如果你的类里有多个方法需要绑定this，可以在构造函数里一次性处理好，后续直接使用更省心：

class thisDiv { 
  constructor() { 
    this.element = $('.div'); 
    this.window = $(window); 
    // 提前把this绑定到类实例
    this.checkSize = this.checkSize.bind(this);
    this.checkSize(); 
    this.events(); 
  } 
  events() { 
    this.window.resize(this.checkSize); 
  } 
  checkSize() { 
    this.element.addClass('red'); 
  } 
} 
export default thisDiv;

验证小技巧 #

你可以在checkSize里加一行日志，看看触发事件时this的指向，就能确认问题是否解决：

checkSize() {
  console.log(this); // 正常应该输出thisDiv实例，而不是window
  this.element.addClass('red');
}

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