Polymer 1.0 debounce方法报错：Cannot read property 'foo' of undefined求助

你遇到的Cannot read property 'foo' of undefined错误，核心原因是**Polymer.Base.debounce是实例方法，而非静态方法**——直接通过Polymer.Base调用时，方法内部的this没有指向有效的Polymer实例，导致它无法访问存储防抖任务的内部属性（比如__debounceJobs），进而抛出这个错误。

为什么会这样？ #

在JavaScript中，直接调用原型上的方法时，this默认指向全局对象（非严格模式）或undefined（严格模式）。而Polymer的debounce方法内部需要this指向一个Polymer实例，才能维护防抖任务的状态（比如通过this.__debounceJobs[jobName]跟踪任务）。当this是undefined时，访问this.__debounceJobs['foo']自然就会报错。

解决方法 #

你有两种可行的修复方式：

1. 创建Polymer.Base实例调用debounce

既然debounce是实例方法，我们可以基于Polymer.Base创建一个实例，再调用该方法：

function scrollSnap() {
  // 创建Polymer.Base的实例作为防抖上下文
  const debounceContext = Object.create(Polymer.Base);
  debounceContext.debounce('foo', ()=> {
    if (app.selected === 'portfolio') {
      if (panel.scroller.scrollTop > 75 && panel.scroller.scrollTop < 200) {
        panel.scroller.scrollTop = 400;
      } else if (panel.scroller.scrollTop > 350 && panel.scroller.scrollTop < 400) {
        panel.scroller.scrollTop = 0;
      }
    }
  }, 1000);
}

2. 用call绑定this到Polymer.Base

如果你不想额外创建实例，可以通过Function.call()强制将debounce方法的this绑定到Polymer.Base：

function scrollSnap() {
  Polymer.Base.debounce.call(Polymer.Base, 'foo', ()=> {
    if (app.selected === 'portfolio') {
      if (panel.scroller.scrollTop > 75 && panel.scroller.scrollTop < 200) {
        panel.scroller.scrollTop = 400;
      } else if (panel.scroller.scrollTop > 350 && panel.scroller.scrollTop < 400) {
        panel.scroller.scrollTop = 0;
      }
    }
  }, 1000);
}

额外提示 #

你在回调里使用箭头函数是完全没问题的——因为你直接引用了全局的app和panel，不需要依赖this上下文。如果后续需要在回调中访问Polymer实例的属性，记得根据实际场景调整this指向即可。

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