Object.defineProperty的set没有触发。

Question

问题描述

我想监听图片的complete属性，在图片加载完后，当complete置为true时，自动触发回调函数cb。如下方这般写后，我在外面用定时器打印图片的img.complete，get的永远是false，因为触发了get方法，但是没触发set方法（顺便打印了item.complete，结果一样都是false，因为赋值在set方法里，没触发）。

相关代码

  setInterval(() => {
    console.log('img.complete', img.complete);
    console.log('item.complete', item.complete);
  }, 500);
  item.complete = img.complete;
  imgDefineProperty(img, cb, item);

  imgDefineProperty (img, cb, item) {
    Object.defineProperty(img, 'complete', {
      get: () => {
        console.log('get');
        return item.complete;
      },
      set: (val) => {
        item.complete = val;
        console.log('set');
        if (val) {
          console.log('set true');
          cb();
        }
      }
    });
  }
  

Answer 1

complete 原本就是只有一个 getter 。它本来就没有 setter ，也不会有人 set 它。

Object.getOwnPropertyDescriptor(document.getElementsByTagName("img")[0].__proto__, "complete")
  {get: ƒ, set: undefined, enumerable: true, configurable: true}
    configurable: true
    enumerable: true
    get: ƒ complete()
    set: undefined
    __proto__: Object

complete 实际是 DOM 的一个属性，js 只是去 DOM 里面读。complete 状态的变化都发生在 DOM 里面。而且它在 DOM 里也是一个只读属性，不能手工修改，只是用来报告图片加载的现状。

Answer 2

这个属性貌似只能读，不能写……