2

javascript で継承を実現するための extend メソッドを作成します。

function Class() {}

Class.prototype.create = function () {
    var instance = new this();
    instance.init();
    return instance;
}


// extend method
Class.extend = Class.prototype.extend = function (props) {
    var SubClass = function () {};

    SubClass.prototype = Object.create(this.prototype);
    for (var name in props) {
        SubClass.prototype[name] = props[name];
    }
    SubClass.prototype.constructor = SubClass;

    if (this.prototype.init) {
        SubClass.prototype.callSuper = this.prototype.init; 
    }
    
    SubClass.extend = SubClass.prototype.extend;
    SubClass.create = SubClass.prototype.create;

    return SubClass;
}


// level 1 inheritance
var Human = Class.extend({
    init: function () {
    }
});

// level 2 inheritance
var Man = Human.extend({
    init: function () {
        this.callSuper();
    }
})

// level 3 inheritance
var American = Man.extend({
    init: function () {
        this.callSuper();
    }
})

// initilization 
American.create();

続いて開発ツールレポートMaximum call stack size exceeded

callSuperメソッドが問題を引き起こしていると思いますcallSupercallinitとinitcall callSuper、両方とも同じコンテキストです。

でも直し方がわからない！

誰でも私を助けることができますか？正しいコンテキストを設定するには?

4

1 に答える 1

1

スコープに問題があります。解決策は次のとおりです。

function Class() {}

Class.prototype.create = function () {
    var instance = new this();
    instance.init();
    return instance;
}


// extend method
Class.extend = Class.prototype.extend = function (props) {
    var SubClass = function () {},
        self = this;

    SubClass.prototype = Object.create(this.prototype);
    for (var name in props) {
        SubClass.prototype[name] = props[name];
    }
    SubClass.prototype.constructor = SubClass;

    if (this.prototype.init) {
        SubClass.prototype.callSuper = function() {
            self.prototype.init();
        }
    }

    SubClass.extend = SubClass.prototype.extend;
    SubClass.create = SubClass.prototype.create;

    return SubClass;
}


// level 1 inheritance
var Human = Class.extend({
    init: function () {
        console.log("Human");
    }
});

// level 2 inheritance
var Man = Human.extend({
    init: function () {
        console.log("Man");
        this.callSuper();
    }
})

// level 3 inheritance
var American = Man.extend({
    init: function () {
        console.log("American");
        this.callSuper();
    }
})

// initilization 
American.create();

重要なポイントは、 initメソッドをクロージャーでラップすることです。

SubClass.prototype.callSuper = function() {
    self.prototype.init();
}

これは、ソリューションを含む jsfiddle ですhttp://jsfiddle.net/krasimir/vGHUg/6/

于 2013-08-21T10:54:40.290 に答える