javascript - 自定义元素继承

Question

我似乎触发了生命周期回调，但我无法访问母类属性。

例如我有这个自定义元素:

var Game = document.registerElement('x-game', {
    prototype: Object.create(HTMLElement.prototype, {
        cards: {
            value: [],
            writable : true,
            enumerable : true,
        },
        createdCallback: {
            value: function () {
                this.cards = deck();
            }
        }
    })
});

使用 deck() 函数来填充我的数组。

我想创建一个继承前者的另一个元素:

var Golf = document.registerElement('x-golf', {
    prototype: Object.create(Game.prototype, {
        columns: {
            value: []
        },
        waste: {
            value: new Waste
        },
        talon: {
            value: new Talon
        },
        createdCallback: {
            value: function () {    
                Game.prototype.createdCallback.apply();
                this.initialize();
            }
        },
        initialize: {
            value : function () {
            for (var i = 0; i < 7; i++) {
                var column = new Column;
                for (var r = 0; r < 5; r++){
                    column.cards[r] = this.cards.pop();
                }
                this.columns[i] = column;
            }
            this.waste.cards.push(this.cards.pop());
            for (var j = 0; j < this.cards.length; j++){
                var card = this.cards.pop();
                card.side = 'verso';
                this.talon.cards[j] = card;
            }
        }
    })
});

通常使用 Game.prototype.createdCallback.apply(); 应该填充新 x-golf 元素上的 cards 属性，但事实并非如此。控制台上card属性的值仍然是一个空数组，为它的默认值。

那么如何确保在父类(super class) createdCallback 的调用中正确填充卡片属性？

Answer 1

您缺少 .apply() 调用的目标:

Game.prototype.createdCallback.apply(this);

工作 jsbin .