path: root/files/ja/web/javascript/reference/global_objects/function/call/index.html

---
title: Function.prototype.call()
slug: Web/JavaScript/Reference/Global_Objects/Function/call
tags:
  - Call
  - Function
  - JavaScript
  - Method
  - メソッド
translation_of: Web/JavaScript/Reference/Global_Objects/Function/call
---
<div>{{JSRef}}</div>

<p><span class="seoSummary"><code><strong>call()</strong></code> メソッドは、 <code>this</code> の値と、独立して提供された引数によって関数を呼び出します。</span></p>

<div>{{EmbedInteractiveExample("pages/js/function-call.html")}}</div>

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

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="syntaxbox notranslate"><var>func</var>.call([<var>thisArg</var>[, <var>arg1</var>, <var>arg2</var>, ...<var>argN</var>]])</pre>

<h3 id="Parameters" name="Parameters">引数</h3>

<dl>
 <dt><code><var>thisArg</var></code> {{optional_inline}}</dt>
 <dd>
 <p><code><var>func</var></code> が呼び出されたときに <code>this</code> として使用される値です。</p>

 <div class="blockIndicator note">
 <p><strong>注意:</strong> 特定の場面では、 <code><var>thisArg</var></code> はメソッドから見える実際の値でない場合があります。</p>

 <p>もし、そのメソッドが{{jsxref("Strict_mode", "厳格モード", "", 1)}}の関数ではなかった場合、 {{jsxref("Global_Objects/null", "null")}} と {{jsxref("Global_Objects/undefined", "undefined")}} はグローバルオブジェクトで置き換えられ、プリミティブ値はオブジェクトに変換されます。</p>
 </div>
 </dd>
 <dt><code><var>arg1</var>, <var>arg2</var>, ...<var>argN</var></code> {{optional_inline}}</dt>
 <dd>呼び出し先の関数に渡される引数です。</dd>
</dl>

<h3 id="Return_value" name="Return_value">返値</h3>

<p><code><strong>this</strong></code> の値と引数を指定して関数を呼び出した結果です。</p>

<h2 id="Description" name="Description">解説</h2>

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

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

<div class="blockIndicator note">
<p><strong>注:</strong> このメソッドの構文は {{jsxref("Function.prototype.apply", "apply()")}} とほぼ同じですが、基本的な違いは <code>call()</code> が<strong>引数リスト</strong>を受け取るのに対して、 <code>apply()</code> は<strong>引数の単一の配列</strong>を受け取る点です。</p>
</div>

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Using_call_to_chain_constructors_for_an_object" name="Using_call_to_chain_constructors_for_an_object">call メソッドを使用してオブジェクトのコンストラクターを連鎖させる</h3>

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

<p>下記の例では、 <code>Product</code> オブジェクトのコンストラクターは <code>name</code> と <code>price</code> の二つの引数で定義されています。</p>

<p>他の <code>Food</code> と <code>Toy</code> の二つの関数は、 <code>Product</code> を呼び出して <code>this</code> と <code>name</code> と <code>price</code> を渡します。 <code>Product</code> は <code>name</code> と <code>price</code> プロパティを初期化し、どちらも特化した関数が <code>category</code> を定義します。</p>

<pre class="brush: js notranslate">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);
</pre>

<h3 id="Using_call_to_invoke_an_anonymous_function" name="Using_call_to_invoke_an_anonymous_function">call メソッドを使用した無名関数の呼び出し</h3>

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

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

<div class="blockIndicator note">
<p>オブジェクトを <code>this</code> の値として渡すことは厳密には必要ではありませんが、説明のために使用しました。</p>
</div>

<pre class="brush: js notranslate">const animals = [
  { species: 'Lion', name: 'King' },
  { species: 'Whale', name: 'Fail' }
];

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

<h3 id="Using_call_to_invoke_a_function_and_specifying_the_context_for_this" name="Using_call_to_invoke_a_function_and_specifying_the_context_for_'this'">call を使用した関数を呼び出しと 'this' のコンテキストの指定</h3>

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

<pre class="brush: js notranslate">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
</pre>

<h3 id="Using_call_to_invoke_a_function_and_without_specifying_the_first_argument" name="Using_call_to_invoke_a_function_and_without_specifying_the_first_argument"><code>call</code> を使用した最初の引数を指定しない関数の呼び出し</h3>

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

<pre class="brush: js notranslate">var sData = 'Wisen';

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

display.call();  // sData value is Wisen</pre>

<div class="note">
<p><strong>注:</strong> 厳格モードでは <code>this</code> の値は <code>undefined</code> になります。以下を参照してください。</p>
</div>

<pre class="brush: js notranslate">'use strict';

var sData = 'Wisen';

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

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

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("javascript.builtins.Function.call")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{jsxref("Function.prototype.bind()")}}</li>
 <li>{{jsxref("Function.prototype.apply()")}}</li>
 <li>
  <p><a href="/ja/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">オブジェクト指向 JavaScript 入門</a></p>
 </li>
</ul>