Function.prototype.call()

call() メソッドは、 this の値と、独立して提供された引数によって関数を呼び出します。

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

構文

function.call(thisArg, arg1, arg2, ...)

引数

thisArg

任意項目です。 function の呼び出して提供される this の値です。なお、実際にこの値が関数の中で this の値として使用されるとは限りません。もし、そのメソッドが非 strict モードの関数だった場合、 null と undefined はグローバルオブジェクトで置き換えられ、プリミティブ値はオブジェクトに変換されます。

arg1, arg2, ...

任意項目です。呼び出し先の関数に渡される引数です。

返値

this の値と引数を指定して関数を呼び出した結果です。

解説

call() はあるオブジェクトに所属する関数やメソッドを、別なオブジェクトに割り当てて呼び出すことができます。

call() は関数やメソッドに this の新しい値を提供します。 call によって、いったんメソッドを書いてから、新しいオブジェクトへメソッドを描き直さずに他のオブジェクトへと継承することができます。

例

オブジェクトのコンストラクターを連鎖させるための call メソッドの使用

call を使用して、 Java と同様にオブジェクトのコンストラクターを連鎖させることができます。下記の例では、 Product オブジェクトのコンストラクターは name と price の二つの引数で定義されています。他の Food と Toy の二つの関数は、 Product を呼び出して this と name と price を渡します。 Product は name と price プロパティを初期化し、どちらも特化した関数が category を定義します。

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

function Toy(name, price) {
  Product.call(this, name, price);
  this.category = 'toy';
}

var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);

call メソッドを使用した無名関数の呼び出し

次の例では、無名関数を作成して call を使用して配列内の各オブジェクトに対して呼び出しを行います。ここでの無名関数の主な目的は、 print 関数をすべてのオブジェクトに追加することで、配列内のオブジェクトの正しいインデックスを表示できるようにします。実際には this の値としてオブジェクトを渡す必要ありませんが、例示の目的で使用しています。

var animals = [
  { species: 'Lion', name: 'King' },
  { species: 'Whale', name: 'Fail' }
];

for (var i = 0; i < animals.length; i++) {
  (function(i) {
    this.print = function() {
      console.log('#' + i + ' ' + this.species
                  + ': ' + this.name);
    }
    this.print();
  }).call(animals[i], i);
}

call を使用した関数を呼び出しと 'this' のコンテキストの指定

次の例では、greet メソッドを呼ぶとき、this の値を obj オブジェクトにバインドしています。

function greet() {
  var reply = [this.animal, 'typically sleep between', this.sleepDuration].join(' ');
  console.log(reply);
}

var obj = {
  animal: 'cats', sleepDuration: '12 and 16 hours'
};

greet.call(obj);  // cats typically sleep between 12 and 16 hours

call を使用した最初の引数を指定しない関数の呼び出し

下記の例では、 display 関数を、最初の引数を渡さずに呼び出しています。最初の引数が渡されないと、 this の値はグローバルオブジェクトに結び付けられます。

var sData = 'Wisen';

function display() {
  console.log('sData value is %s ', this.sData);
}

display.call();  // sData value is Wisen

'use strict';

var sData = 'Wisen';

function display() {
  console.log('sData value is %s ', this.sData);
}

display.call(); // undefined の 'sData' のプロパティは読めない

仕様書

ブラウザーの対応

関連情報

• Function.prototype.bind()
• Function.prototype.apply()

• オブジェクト指向 JavaScript 入門