[Q&A] 【Javascript】このCallメソッドが何をしているのか教えて頂きたいです。

【Javascript】このCallメソッドが何をしているのか教えて頂きたいです。

Javascriptを学習中のものです。

ある参考書でプロトタイプチェーンについて読んでいたところ、以下のようなコードの記載がありました。

※コードはES2015以前であることを前提に記載されています。

var Animal = function() {};

Animal.prototype = {
  walk: function() {
    console.log("トコトコ");
  }
};

var Dog = function() {
  Animal.call(this);
};

Dog.prototype = new Animal();

Dog.prototype.bark = function() {
  console.log("わんわん");
};

var d = new Dog();

d.walk();
d.bark();

お聞きしたい内容はこのソースの以下の箇所です。

var Dog = function() {
  Animal.call(this);
};

このCallメソッドは一体何をしているのでしょうか。
参考書の説明では、

「Animalコンストラクターを現在のthisで呼び出しなさい」という意味です。
ここではコンストラクターが空なので、なくても問題ありません。

という説明だけがあるのですが、
現在のthisで呼び出しなさい　という説明の意味がわからなく...。

現在自分の認識では、以下のように認識しております。

①callメソッドは対象のオブジェクトに対し、thisの参照先を指定することができるメソッドである。

②thisは関数内で使用した際はグローバルオブジェクト、もしくはundefinedを示す。
※実際、Animal.call(this)をconsoleで出力したらundefinedでした。

よって、このcallメソッドではundefinedかグローバルオブジェクトのいずれかしか入らないような気がしており、正直何がしたいコードなのか理解ができていないです。

何卒、ご教示の程宜しくお願い致します。

1Answer

@uasi posted at 2022-10-19

※実際、Animal.call(this)をconsoleで出力したらundefinedでした。

Animal.call(this) を出力しても this の値は分からないと思いますが。 this の値を知るにはそのコンテキストで console.log() を呼んでください。ここでは空のオブジェクトを表す {} が出力されます。

var Dog = function() {
  console.log(this);
  Animal.call(this);
};

なぜこうなるかというと、 Dog 関数は var d = new Dog(); のようにコンストラクタとして呼び出されているからです。この場合は②とは異なり、生成された Dog のインスタンスが this にセットされます。

Animal.call(this); は、 Animal 関数の中の this が今の this （Dog のインスタンス）になるように呼び出しています。

Animal 関数は var Animal = function() {}; と定義されているので、今は呼んでも特に意味はありません。もし以下のようにオブジェクトのプロパティをセットするコードに変えたとすると、

var Animal = function() {
  this.name = "default name";
};

この中身が（this が Dog のインスタンスになっている状態で）実行されるので、 d.name === "default name" となります。

ようするに Java でいえばサブクラスのコンストラクタの中で super() を呼ぶのと同じことです。

4Like

Comments

@TaikiTkwkbysh
Questioner
@uasi様

返信が遅くなってしまい、申し訳ございません。
この度はご教示頂き、誠にありがとうございます。

var Dog　に代入している関数がコンストラクタ関数であり、クラス宣言であることを見落としておりました...。
結果callメソッド内のthisがDogインスタンスになるわけですね。

大変納得致しました。
ご対応頂き、ありがとうございます！

Are you sure you want to delete the question?

【Javascript】このCallメソッドが何をしているのか教えて頂きたいです。

1Answer

Comments

Your answer might help someone💌