@aono1234posted at 2022-03-20

クラス継承でエラーが発生する

Q&A

エラーを解消したい

質問1
Chart.jsのChartクラスを継承し
サブクラスのインスタンス時にconsole.logが動作するか検証を行っていたのですが、
エラーが発生してしまいます。
何が原因でしょうか？

super()に関して知りたい

質問2
super()に関して
super()の中に引数がない場合エラーが発生してしまうと以前知りました。
Chartクラスにあるすべてのコンストラクタを継承したいと思っております。
その場合はsuperの引数に何を記載すればよいでしょうか？

発生している問題・エラー

Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

該当するソースコード

class edit  extends Chart{
	constructor(){
		console.log('hello');
     }
}

var ctx = document.getElementById('myChart');
var myChart = new edit(ctx, {
	type: "bar",
	data:{
		labels:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
		datasets:[
			{
				label:'line1',
				type:'line',
				data:[1,1,1,2,4,4,3],
				backgroundColor: "red",
				borderColor : "rgba(254,97,132,0.8)",
				fill: 'false',
				yAxisID: 'y-axis-2',
			},
			{
				label:'line2',
				type:'line',
				data:[2,3,4,5,6,7,8],
				backgroundColor: "blue",
				borderColor : "rgba(254,97,132,0.8)",
				fill: false,
				yAxisID: 'y-axis-2',
			},
			{
				label:'line3',
				type:'line',
				data:[5,5,5,5,5,5,5,5,5,5,5,5],
				backgroundColor: "red",
				borderColor : "red",
				fill: false,
				yAxisID: 'y-axis-2',
			},
			{
				label:'数値A',
                type:'bar',
				data:[0,0,1,1,1,1,1,3,2,1,],
				backgroundColor: "#00ff7f",
				yAxisID: 'y-axis-sales',
			},
			{
				label:'数値B',
                type:'bar',
				data:[3,3,3,3,3,3,3],
				backgroundColor: "#008000",
				yAxisID: 'y-axis-sales'
			},
            {
				label:'数値C',
                type:'bar',
				data:[3,3,3,3,3,3,3],
				backgroundColor: "skyblue",
				yAxisID: 'y-axis-sales'
			},
		]
	},
	options:{
		title: {                           //タイトル設定
			display: true,                 //表示設定
			fontSize: 18,                  //フォントサイズ
			text: '月別の数値'                //ラベル//
		},
		legend: {
			display: true,
			position: 'left',
			label:'test', 
		},
		scales:{
			xAxes:[{stacked:true,}],
			yAxes:[{
				id: 'y-axis-sales',//積み上げるY軸
				stacked: true,
				type: 'linear',
				display: true,
				position: 'left',
				ticks: {
					beginAtZero: true,
					min: 0,
					max: 10,
					stepSize: 2,
				},
			},{
				id: 'y-axis-2',//積み上げないY軸
				stacked: true,
				type: 'linear',
				display: true,//隠します
				position: 'right',
				ticks: {
					beginAtZero: true,
					min: 0,
					max: 20,
					stepSize: 5,
				},
			}]
		},
	}
});

2Answer

@blue32a posted at 2022-03-20

superは親の関数を呼び出すためのものなので、constructorメソッドで呼び出すと親クラスのconstructorメソッドを呼び出すことになります。
つまり記載の例でsuperが必要とする引数は、親であるChartクラスのconstructorが要求する引数です。

super()の中に残余引数、可変長引数なるものを使えば、すべての引数を継承できます。

自己解決されたようですが、要求する引数が親と子で違うケースもあります。
例えば次のような場合です。

人を示すPersonクラスと、山田さんを示すYamadaクラス

// 人はfamilyNameとfirstNameを持つ
class Person {
    constructor(familyName, firstName) {
        this.familyName = familyName;
        this.firstName = firstName;
    }
    
    fullName() {
        return this.familyName + this.firstName;
    }
}

// 山田はfamilyNameが"山田"の人
class Yamada extends Person {
    // familyNameは必ず"山田"なので、firstNameのみ要求する
    constructor(firstName) {
        super('山田', firstName);
    }
}

const yamadaTaro = new Yamada('太郎');
console.log(yamadaTaro.fullName()); // 山田太郎

1Like

Comments

@aono1234
Questioner
なるほど、familyNameに定数してそれ以外の引数を継承することもできるのですね！
毎度ご回答頂き、ありがとうございます！

@aono1234 posted at 2022-03-20

投稿者です。
質問1,質問2ともに自己解決できました。
質問1についてはsuper()がなかったのが原因です。
しかしsuper()と入れてもエラーが発生します。

そこで質問2です。
super()の中に残余引数、可変長引数なるものを使えば、すべての引数を継承できます。

そのため、質問1のエラーを解決するためには
constructor(...args){
　　　　super(...args);
console.log('hello');
}
とすればエラーなく継承できました。

0Like

Are you sure you want to delete the question?