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

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

然而，输出显示为

value in parent class 0
Constructor parameter : 666

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

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

NB： 我想补充更多的发现，第二个是重要的发现。 - ＆gt; 如果我尝试通过

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

这不是我预期的事情。我期待看到孩子班。

- ＆gt; 如果我尝试在child（）和grandChild（）类中注释 //this.constructor(param_1);，则代码完全按预期工作。

请有人解释这种现象。

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

由于

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

我建议您阅读this article，以便深入了解原型如何在javascript中运行。

Answer 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

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

2 个答案: