自定义元素继承

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元素上的牌属性应该填充，但不是。控制台上的card属性值仍然是一个空数组，它是默认值。

那么如何通过超类createdCallback的调用确保正确填充卡属性？

Answer 1

您错过了.apply()来电的目标：

Game.prototype.createdCallback.apply(this);

工作jsbin。