Javascript Prototype Chaining 超类构造函数和方法调用答案

【问题标题】：Javascript Prototype Chaining super class constructor and method callingJavascript Prototype Chaining 超类构造函数和方法调用
【发布时间】：2012-01-31 20:01:29
【问题描述】：

我是 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);

首先，我想将参数传递给父类的构造函数，就像它们在其他 OO 语言中调用 super(args) 的方式一样。所以this.constructor(param_1); 非常适合这个目的。

但是，输出显示为

value in parent class 0
Constructor parameter : 666

这表明，grandChild 类跳过了原型链，而不是调用 child() 类的 getObjWithParam()，而是调用了父类的 getObjWithParam()。

有人知道这里出了什么问题吗？

注意： 我想补充两个发现，第二个是重要的。 --> 如果我尝试通过

找到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);
    };
}

这不是我所期望的。我期待看到子类。

-->如果我尝试在 child() 和 grandChild() 类中评论 //this.constructor(param_1);，代码将完全按预期工作。

谁能解释一下这个现象。

此外，如果有人能提出解决方法，我们将不胜感激。

谢谢

【问题讨论】：

标签： javascript constructor parameter-passing superclass

【解决方案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);

我建议您阅读this article，以更深入地了解原型在 javascript 中的工作原理。

【讨论】：

你的例子和文章是有帮助的，但是，我想这让我回到第一点。我试图在原型链继承中调用超类方法。我尝试使用this.constructor(param_1); 调用超类构造函数方法并尝试通过Class.prototype.function.call(this, [param]); 调用超类方法所以我想，我会按照我正在做的方式调用超类方法，并停止使用//this.constructor(param_1); 代替，我将在父类中有一些方法来初始化继承的变量，我可以从子类中调用。

【解决方案2】：

如果你想在 jQuery 中进行链接 (Fluent Interface)：

<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>

见example

【讨论】：