Javascript Prototype Chaining конструктор суперкласса и вызов метода

Question

Я новичок в мире JavaScript, и я столкнулся с этой странной проблемой, когда пытался унаследовать цепочку прототипов.

У меня 3 класса

//class parent
function parent(param_1){
    this.param = param_1;
    this.getObjWithParam = function(val){
        console.log("value in parent class "+val);
        console.log("Constructor parameter : "+this.param);
    };

};

//class child
function child(param_1){
    this.constructor(param_1);
    this.getObjWithParam = function(val){
        console.log("value in child class "+val);
        val = Number(val)+1;
        child.prototype.getObjWithParam.call(this, [val]);
    };
};
child.prototype = new parent();

//class grandChild
function grandChild(param_1){
    this.constructor(param_1);
};
grandChild.prototype = new child();


var gc = new grandChild(666);
gc.getObjWithParam(0);

Во-первых, я хотел передать параметр конструктору родительских классов, как это делается при вызове super (args) в других языках OO. так что this.constructor(param_1); вполне соответствует цели.

Тем не менее, вывод отображается как

value in parent class 0
Constructor parameter : 666

Это говорит о том, что класс grandChild пропустил цепочку прототипов и вместо вызова getObjWithParam () класса child () вызвал getObjWithParam () родительского класса.

Кто-нибудь знает, что здесь не так?

Примечание: Еще 2 вывода, которые я хочу добавить, и второй - важный. -> Если я попытаюсь найти конструктор класса grandChild по

console.log(gc.constructor)

вывод, который я получаю

function parent(param_1){
    this.param = param_1;
    this.getObjWithParam = function(val){
        console.log("value in parent class "+val);
        console.log("Constructor parameter : "+this.param);
    };
}

что не совсем то, что я ожидал. Я ожидал увидеть детский класс.

-> Если я попытаюсь комментировать //this.constructor(param_1); в классе child () и grandChild (), код будет работать точно так, как ожидается.

Может кто-нибудь объяснить это явление, пожалуйста.

Кроме того, будет очень признателен, если кто-нибудь может предложить обходной путь.

Спасибо

Answer 1

Объявление this.SOME_METHOD в функции конструктора не добавляет его к прототипу типа.Функции прототипа должны быть объявлены отдельно, например:

//class parent
function parent(param_1){
    console.log("parent " + param_1);
    this.param = param_1;
}

parent.prototype.getObjWithParam = function(val) {
    console.log("value in parent class "+val);
    console.log("Constructor parameter : "+this.param);
};

//class child
function child(param_1){
    console.log("child " + param_1);
    this.constructor(param_1);
}
child.prototype = new parent();
child.prototype.getObjWithParam = function(val) {
    console.log("value in child class "+val);
    val = Number(val)+1;
    parent.prototype.getObjWithParam.call(this, [val]);    
}

//class grandChild
function grandChild(param_1){
    console.log("grandChild " + param_1);
    this.constructor(param_1);
}
grandChild.prototype = new child();


var gc = new grandChild(666);
gc.getObjWithParam(0);

Я бы рекомендовал вам прочитать эту статью , чтобы глубже понять, как прототипы работают в javascript.

Answer 2

Если вы хотите создать цепочку ( Свободный интерфейс ), как в jQuery:

<div id="div"></div>

<script type="text/javascript">
function $(id) {
    if(this.$) return new $.init(id);
}

$.init = function(id) {
     if(typeof id == 'string') {
         this.id = document.getElementById(id);
     }
};

$.init.prototype = $.prototype = {
    constructor: $,
    css: function(value) {
        for(i in value) {
            this.id.style[i] = value[i];
        }
        return this;
    },
    mush : function() {
        var text = this.id.innerHTML;
        this.id.innerHTML = text.split('').join('--');
        return this;
    },
    text : function(a) {
        this.id.innerHTML = a;
        return this;
    }
};

$('div').text('FOO').mush().css({
        'color' : 'red',
        'textTransform' : 'uppercase'
});
</script>

См. пример