Function.prototype.call()

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

構文

func.call([thisArg[, arg1, arg2, ...argN]])

引数

thisArg Optional

func が呼び出されたときに this として使用される値です。

注意: 特定の場面では、 thisArg はメソッドから見える実際の値でない場合があります。

もし、そのメソッドが厳格モードの関数ではなかった場合、 nullundefined はグローバルオブジェクトで置き換えられ、プリミティブ値はオブジェクトに変換されます。

arg1, arg2, ...argN Optional
呼び出し先の関数に渡される引数です。

返値

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

解説

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

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

注: このメソッドの構文は apply() とほぼ同じですが、基本的な違いは call()引数リストを受け取るのに対して、 apply()引数の単一の配列を受け取る点です。

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

call を使用して (Java と同様に) オブジェクトのコンストラクターを連鎖させることができます。

下記の例では、 Product オブジェクトのコンストラクターは nameprice の二つの引数で定義されています。

他の FoodToy の二つの関数は、 Product を呼び出して thisnameprice を渡します。 Productnameprice プロパティを初期化し、どちらも特化した関数が 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';
}

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

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

次の例では、無名関数を作成して call を使用して配列内の各オブジェクトに対して呼び出しを行います。

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

オブジェクトを this の値として渡すことは厳密には必要ではありませんが、説明のために使用しました。

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

for (let 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() {
  const reply = [this.animal, 'typically sleep between', this.sleepDuration].join(' ');
  console.log(reply);
}

const 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

注: 厳格モードでは this の値は undefined になります。以下を参照してください。

'use strict';

var sData = 'Wisen';

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

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

仕様書

仕様書
ECMAScript (ECMA-262)
Function.prototype.call の定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung InternetNode.js
callChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 5.5Opera 完全対応 4Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0nodejs 完全対応 あり

凡例

完全対応  
完全対応

関連情報