web-dev-qa-db-ja.com

サブクラスからスーパークラス関数を呼び出す適切な方法

インスタンス変数として「情報」を持つ「スーパークラス」があります。 「SuperClass」には「printInfo（）」という機能があります。 「printInfo（）」はインスタンス変数「info」にアクセスする必要があります。メソッド「printInfo（）」も含む「SubClass」を作成したい。 「SubClass」の「printInfo（）」から「SuperClass」のprintInfo（）を呼び出したい。

SuperClass = function()
{
    this.info = "I am superclass";
    console.log("SuperClass:");
};

SuperClass.prototype.printInfo = function(that)
{
    console.log("printing from superclass printInfo");
    console.log(that.info);
};

SubClass = function(){};

SubClass.prototype = new SuperClass();

SubClass.prototype.printInfo = function()
{
    console.log("calling superclass");
    this.constructor.prototype.printInfo(this);
    console.log("called superclass");
};

var sc = new SubClass();
sc.printInfo();

PrintInfoのパラメーターとして「それ」を渡していることがわかります。 「that」パラメーターがない場合、「info」は「undefined」として出力されます。次の場合のように、この関数が「SubClass」のオブジェクトから呼び出された場合、「this.info」は未定義です。

SuperClass.prototype.printInfo = function()
    {
        console.log("printing from superclass printInfo");
        console.log(this.info);
    };

JavaScriptでスーパークラスのメソッドをオーバーライドおよび呼び出して、関数がクラスのインスタンス変数にアクセスできるようにする適切な方法は何ですか？

javascriptinheritanceprototypal-inheritance
29
coolscitist

この行では、SubClassのオブジェクトでSuperClassのプロトタイプをいじっています。

SubClass.prototype = new SuperClass();

子のプロトタイプは親のプロトタイプに依存する必要があります。だから、あなたはこのように継承することができます

SubClass.prototype = Object.create(SuperClass.prototype);

また、このようにコンストラクターを実際の関数に変更することは非常に正常です

SubClass.prototype.constructor = SubClass;

実装を汎用的に保つには、 Object.getPrototypeOf 、継承チェーンの親プロトタイプを取得し、printInfoを呼び出すには、次のようにします。

SubClass.prototype.printInfo = function() {
    Object.getPrototypeOf(SubClass.prototype).printInfo(this);
};

infoはSubClassでまだ定義されているため、undefinedを出力します。次のように、parent'tコンストラクターを呼び出すこともできます。

var SubClass = function() {
    SuperClass.call(this);
};

注：varおよびSuperClassの前にあるSubClassキーワードを省略して、グローバル変数を作成しています。

27
thefourtheye

すべての答えを読んだ後、次の継承メカニズムを使用しています。

var SuperClass = function()
{
    this.info = "I am superclass";
    console.log("SuperClass:");
};

SuperClass.prototype.printInfo = function()
{
    console.log("printing from superclass printInfo");
    console.log("printinfo");
    console.log(this.info);
};

var SubClass = function(){
    SuperClass.call(this);
};

SubClass.prototype = Object.create(SuperClass.prototype);
SubClass.prototype.constructor = SubClass;

SubClass.prototype.printInfo = function()
{
    console.log("calling superclass");
    Object.getPrototypeOf(SubClass.prototype).printInfo.call(this);
    console.log("called superclass");
};

var sc = new SubClass();
sc.printInfo();
9
coolscitist

このように書くことができます：

SuperClass.prototype.printInfo = function(){
  console.log("printing from superclass printInfo");
  console.log(this.info); 
};

SubClass.prototype.printInfo = function(){
  console.log("calling superclass");
  SuperClass.prototype.printInfo.call(this);
  console.log("called superclass");
};
6
Camille Wintz

Java世界からより多くの人のために、私は上記のすべてを無視し、代わりに2015年に導入された次の構文を使用します

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

class Square extends Polygon {
  constructor(sideLength) {
    super(sideLength, sideLength);
  }
  get area() {
    return this.height * this.width;
  }
  set sideLength(newLength) {
    this.height = newLength;
    this.width = newLength;
  }
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain の詳細

そして突然、祖先などにアクセスするためのキーワードとしてsuperを使用できます。私にとって、これは大きな安心でした。

4
Tom

しゅう

の代わりに

SubClass.prototype.printInfo = function()
{
    Object.getPrototypeOf(SubClass.prototype).printInfo.call(this);
};

これを使って

SubClass.prototype.printInfo = function()
{
    Object.getPrototypeOf(this.constructor.prototype).printInfo.call(this);
};
3
Lo HaBuyshan
class Thing {
  constructor(age) { this.age = age; }
  die(how) { console.log(`Died of ${how}`); }
}

class Me extends Thing {
  constructor() { super(59); console.log(`I am ${this.age}`); }
  // Refer to a method from the superclass that is overridden in the subclass
  die(how) { super.die('liver failure'); console.log(`while ${how}`) }
}

(new Me()).die('hang gliding');
0
Denis Howe