callの使い方を教えてください

Question

こんにちは。私はJavascriptを勉強しています。大体4ヶ月めです。

今callの使い方を学んでいるのですが、いまひとつしっくりと理解できません。

簡単にいえば、call()内の関数でオブジェクトを操作するというものだと思いましたが、下記の用に少し難易度の高いものを見ると意味がわからなくなってしまいます。

// スーパークラス的な携帯電話
function CellPhone(number) {
  this.phoneNumber = number;
}

// サブクラス的なスマートフォン
function SmartPhone(number, wifispots) {
  this.wifispots = wifispots;
  CellPhone.call(this, number);
}
SmartPhone.prototype = new CellPhone(); // insatnceof用

// 利用コード(携帯番号とWifiスポットを固有データとして持たせます)
var myphone = new SmartPhone('09012344432', ['Home','StarBucksWifi']);

上のコードを解説しながらcallというものは何をするものなのか教えて下さる方はいませんでしょうか？

よろしくおねがいいたします。

Answer 1

.callは、「thisを設定してメソッドを呼ぶ」ための手法です。

「SmartPhoneがCellPhoneを継承する」というには、SmartPhoneのインスタンスもCellPhoneとして初期化する必要があります。そのため、SmartPhoneのコンストラクタからCellPhone.call(this)とすることで、自身に対してCellPhoneとしての初期化を実行しています。

---

なお、ES6ではclass構文が登場しているので、callやプロトタイプを駆使して継承を組み立てる必要は薄くなっています。

class CellPhone{
  constructor(number) {
    this.phoneNumber = number;
  }
}

class SmartPhone extends CellPhone{
  constructor(number, wifispots) {
    super(number);
    this.wifispots = wifispots;
  }
}

Comments

[takane]

ほかの方法もあるのですね。
まだ初心者のうちなので古い方法から学んでいこうとおもいます。
ありがとうございます。

Answer 2

function CellPhone(number) {
  this.phoneNumber = number;
}
function SmartPhone(number, wifispots) {
  this.wifispots = wifispots;
  CellPhone.call(this, number);
}
martPhone.prototype = new CellPhone();

↑これは↓これと大体等価です。

function CellPhone(number) {
  this.phoneNumber = number;
}
function SmartPhone(number, wifispots) {
  this.wifispots = wifispots;
  this.phoneNumber = number;
}
martPhone.prototype = new CellPhone();

なぜ例文のような書き方をするかというと、

function CellPhone(number) {
  this.phoneNumber = number;
  this.phoneNumber1 = number;
  this.phoneNumber2 = number;
  this.phoneNumber3 = number;
  this.phoneNumber4 = number;
  this.phoneNumber5 = number;
}
function SmartPhone(number, wifispots) {
  this.wifispots = wifispots;
  this.phoneNumber = number;
  this.phoneNumber1 = number;
  this.phoneNumber2 = number;
  this.phoneNumber3 = number;
  this.phoneNumber4 = number;
  this.phoneNumber5 = number;
}
martPhone.prototype = new CellPhone();

↑こんな感じに書くと、さすがにバカっぽいので再利用したほうがいいからです。

ところでこの時に、

function CellPhone(number) {
  this.phoneNumber = number;
}
function SmartPhone(number, wifispots) {
  this.wifispots = wifispots;
  CellPhone(number);
}
martPhone.prototype = new CellPhone();

こう書いてしまうと上手くいきません。

なぜなら、

function CellPhone(number) {
  this.phoneNumber = number;       // ここのthisと
}
function SmartPhone(number, wifispots) {
  this.wifispots = wifispots;      // ここのthisの中身が違う。
  CellPhone(number);
}
martPhone.prototype = new CellPhone();

↑thisは文脈によって中身が変わるからです。こっちでのthisをあっちに渡さないといけません。
callメソッドの書式はfun.call(thisArg[, arg1[, arg2[, ...]]])となっており、あっちでのthisを指定することができます。



ちなみに、bindメソッドでも同じことができます。

  CellPhone.bind(this)(number);

　


javascriptのプロトタイプ継承は無駄に複雑ですので、すべてを忘れてclass構文+Babelを使った方が幸せになれるかもしれません。

Comments

[takane]

長くなるコードを省略する目的で使われているのですね。
個人的にはあまり使うことがなさそうですが
callは決行たくさん見かけます。
ありがとうございます。

[Lhankor_Mhy]

> 長くなるコードを省略する目的で使われている

あくまでこのコードではそう、というだけです。
Array.prototype.slice.call のように、オブジェクトにあるメソッドを別のオブジェクトを対象にして使いたい時に使うことが多いです。

Answer 3

まずはドキュメントを読まれましたでしょうか？ここにはcallがどういう働きをするか書かれています。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call

もしここを読んだ上でよくわからないというのであれば、質問に「リファレンスを読んだが理解が及ばない」と一言付けてもらえば、できるだけ優しく解説されると思います。

Comments

[takane]

うーん、私の頭がわるいのかもしれません、
読んでも読んでもはてなという感じでした。
気をつけます。

[masaya_ohashi]

初級者で理解が出来ないのはべつに悪いことではありません。私も意地悪で言ったのではなく、まずは一番詳しく書いてあるリファレンスを読んで、それでもわからないなら解説を求めるというのが正しい勉強の手順だと思うからです。なんとなく入門サイトのコードを眺めるだけでなく、本家の説明も読めるようになるのがレベルアップの第一歩です。がんばってください。