如何告诉 postMessage 结构化克隆忽略属性？

Question

我正在做一个项目，我需要在 iframe 中创建一个对象，然后将所述对象发送到父窗口。

问题是 postMessage 失败，因为该对象无法克隆 (DataCloneError)，因为它具有函数 (callback) 属性。

更复杂的是，存在一种循环关系，即按钮列表包含按钮，每个按钮都有对其父列表的引用。

如果这是使用JSON.stringify 而不是结构化克隆，则可以覆盖按钮上的toJSON 并避免发送callback 并将list 替换为listId 以避免循环引用情况。是否有与 toJSON 等效的结构化克隆，允许在保持循环关系的同时忽略 callback，或其他解决方案？

这是错误可重现的情况的粗略要点：

class ButtonList {
    constructor() {
        this.buttons = [];
    }

    addButton(button) {
        if (!this.buttons.includes(button)) {
            this.buttons.push(button);
            button.setList(this);
        }
        return this;
    }
}

class Button {
    setList(list) {
        if (!list) return this;
        if (this.list !== list) {
            this.list = list;
            list.addButton(this);
        }
        return this;
    }

    setCallback(callback) {
        this.callback = callback;
        return this;
    }

    getCallback() {
        return this.callback;
    }

    runCallback() {
        if (!this.callback) return this;
        this.callback();
        return this;
    }
}

const list = new ButtonList();
const button = new Button().setList(list).setCallback(() => console.log('Hello'));
window.postMessage(list, '*');

// DataCloneError: The object could not be cloned.

父窗口不需要知道回调，但需要知道任何其他属性。

Answer 1

使用Object.assign 创建一个具有覆盖属性的新对象，并将其通过postMessage 发送。

const foo = {
  bar: 'bar',
  list: { bla: 'bla' },
  baz: function() {
    console.log('baz')
  }
}

const serializable = Object.assign({}, foo, { 
  list: 3,
  baz: undefined 
})

console.log(serializable)