Javascript Prototype链接超类构造函数和方法调用 [英] Javascript Prototype Chaining super class constructor and method calling

问题描述

我是JavaScript世界的新手，当我尝试原型链接继承时，我想出了这个奇怪的问题。

我有3个类

  // class parent 
 function parent（param_1）{
 this.param = param_1; 
 this.getObjWithParam = function（val）{
 console.log（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（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）; 
  

首先，我想向父类的构造函数传递一个参数，通过在其他OO语言中调用super（args）。
so this.constructor（param_1）; 相当适合的目的。

 父类中的值0 
构造函数参数：666 
  
 
 
 
这意味着，类grandChild跳过了原型链，而不是调用child（）类的getObjWithParam（），调用getObjWithParam父类。
 
 
 
有没有人知道这里有什么问题？
 
 
 
  / strong> 
我想添加更多的结果，第二个是重要的。 
   - > 如果我尝试通过
 控制台找到grandChild类的构造函数.log（gc.constructor）
  
输出i get is 
  function parent（param_1）{
 this.param = param_1; 
 this.getObjWithParam = function（val）{
 console.log（parent class中的值+ val）; 
 console.log（Constructor parameter：+ this.param）; 
}; 
} 
  
这不是我预期的东西。 
   - > 如果我尝试注释 <$ c $在child（）和grandChild（）类中，c> // this.constructor（param_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（父类中的值+ 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（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中的工作原理。
 
I'm a newbie in the JavaScript world, and I came up with this weird problem when i was attempting prototype chaining inheritence.

I have 3 classes 
//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);
Firstly, I wanted to pass a parameter to the constructor of the parent classes, like the way they do by calling super(args) in other OO languages.
so this.constructor(param_1); fairly suits the purpose.

However, the output comes up as 
value in parent class 0
Constructor parameter : 666
Which suggests, that the class grandChild has skipped the prototype chain, and instead of calling getObjWithParam() of child() class, has called getObjWithParam() of the parent class.

Does anyone have any idea what goes wrong here?

NB:
2 more findings i want to add, and the second one is the important one.
--> If I try to find the constructor of grandChild class by 
console.log(gc.constructor)
the output i get is 
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);
    };
}
which is the not quite the thing i expected. I was expecting to see the child class.

--> If I try to comment //this.constructor(param_1); in the child() and the grandChild() class, the code works exactly as expected.

Could anyone explain this phenomenon please.

Also, it'll be highly appreciated if anyone could suggest an workaround.

Thanks
解决方案
Declaring a this.SOME_METHOD in the constructor function doesn't add it to the type's prototype. Prototype functions need to be declared separately, e.g.:
//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);
I would recommend you to read this article, to get a deeper insight how prototypes work in javascript.

                        
这篇关于Javascript Prototype链接超类构造函数和方法调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！