es6的一些细节

es6要实现继承，需要用到两个东西extends与super， super必须在构造方法的最上面

        class Avalon {
            constructor() {
                this.template = '<div></div>'
                this.soleSlot = false
            }
            init(props) {
                // console.log('initing', props,'aa' in this)
                for (var i in props) {
                    if (i in this) {
                        this[i] = props[i]
                    }
                }
                avalon.component(this.constructor.name, this)
            }
            onInit() {}
            onReady() {}
            onViewChange() {}
            onDispose() {}
        }

下面这样写在chrome下报错

 class Button extends Avalon {
            constructor(props) {
                               this.aaa = 777
                super()
                this.template = '<p>{{@aaa}}</p>'
                this.init(props)
            }
            onInit() {
                console.log('xxx')
            }
            otherMether() {}
        }

需要改成

 class Button extends Avalon {
          constructor(props) {
               super()
                this.aaa = 777
                this.template = '<p>{{@aaa}}</p>'
                this.init(props)
            }
            onInit() {
                console.log('xxx')
            }
            otherMether() {}
        }

组件的继承其实类似于 经典的组合寄生继承。我们需要在构造器里面调用它的父类。

我们创建一个工厂，只传入一个类名，生成一个继承于Avalon的子类

avalon.createComponent = (function() {
    function obj(o) {
        var __ = function() { }
        __.prototype = o
        return new __
    }

    function extend(child, parent) {
        //这里要创建对象就是防止对parent产生污染
        var proto = child.prototype = obj(parent.prototype);
        proto.constructor = child
    }
    return function(className) {
        var f = Function('__parent', '__extends',
        ['function ' + className + '(props){',
        '\t__parent.call(this)',
        '\tthis.init(props)',
        '}',
        '__extends(' + className + ',__parent)',
        'return ' + className].join('\n')
        )
        return f(Avalon, extend)
    }
})()

然后我们这样做

var MsButton = avalon.createComponent('MsButton')
new MsButton({
    aaa: 111,
    bbb: 44
})

发现报错了，出错的行是__parent.call(this);。经调查，es6形式的类不能作为函数放在这里被调用。

将Avalon改成es5 形式就好了

        function Avalon() {
            this.template = '<div></div>'
            this.soleSlot = false
        }
        Avalon.prototype = {
            onInit: function() {},
            onReady: function() {},
            onViewChange: function() {},
            onDispose: function() {},
            constructor: Avalon,
            init: function(props) {
                for (var i in props) {
                    if (i in this) {
                        this[i] = props[i]
                    }
                }
                avalon.component(this.constructor.name, this)
            }
        }