Javascript原型链接超类构造函数和方法调用

Javascript Prototype Chaining super class constructor and method calling

本文关键字：方法 调用 构造函数 超类 原型 链接 Javascript      更新时间：2023-09-26

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

这表明，类的孙子已经跳过了原型链，而不是调用getObjWithParam()的子()类，调用getObjWithParam()的父类。

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

注:我还想补充两个发现，第二个是最重要的。->如果我试图通过

找到孙子类的构造函数
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);，代码将完全按照预期工作。

谁能解释一下这个现象?

另外，如果有人能提出一个解决办法，我将不胜感激。

谢谢

声明一个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中是如何工作的。

如果你想在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>

看到示例

相关文章：