JavaScript call()メソッド

概要: このチュートリアルでは、JavaScriptのcall()メソッドとその効果的な使用方法を学習します。

JavaScript call()メソッドの概要

JavaScriptでは、関数は関数型のインスタンスです。たとえば

function add(x, y) {
  return x + y;
}

console.log(add instanceof Function); // trueCode language: JavaScript (javascript)

Function.prototype型には、次の構文のcall()メソッドがあります

functionName.call(thisArg, arg1, arg2, ...);Code language: JavaScript (javascript)

この構文では、call()メソッドは関数のfunctionNameに引数(arg1, arg2, ...)とthis関数の内のthisArgオブジェクトに設定して呼び出します。

• thisArgは、関数functionNameの中でthisオブジェクトが参照するオブジェクトです。
• arg1, arg2, ..はfunctionNameに渡される関数引数です。

call()メソッドはfunctionName()の呼び出しの結果を返します。

次の例では、add()関数を定義し、通常通り呼び出します

function add(x, y) {
  return x + y;
}

let result = add(10, 20);
console.log(result); // 30Code language: JavaScript (javascript)

次に、add()関数を呼び出しますが、代わりにcall()メソッドを使用します

function add(x, y) {
  return x + y;
}

let result = add.call(this, 10, 20);
console.log(result); // 30Code language: JavaScript (javascript)

デフォルトでは、関数内のthisはグローバルオブジェクトに設定されます。つまり、Webブラウザではwindow、Node.jsではglobalです。

厳格モードでは、関数内のthisはグローバルオブジェクトの代わりにundefinedに設定されます。

次の例を考えてみます

var greeting = 'Hi';

var messenger = {
    greeting: 'Hello'
}

function say(name) {
    console.log(this.greeting + ' ' + name);
}Code language: JavaScript (javascript)

say()関数内で、greetingを参照するためにthis値を使用します。次の通り、call()メソッドを使用してsay()関数を呼び出すとします

say.call(this,'John');Code language: JavaScript (javascript)

次の出力がコンソールに表示されます

"Hi John"Code language: JavaScript (javascript)

しかし、say関数オブジェクトのcall()メソッドを呼び出し、thisの値としてmessengerオブジェクトを渡すとします

say.call(messenger,'John');Code language: JavaScript (javascript)

出力が次のようになります

"Hello John"Code language: JavaScript (javascript)

この場合、say()関数内のthis値はグローバルオブジェクトではなくmessengerオブジェクトを参照します。

JavaScript call()メソッドを使用してオブジェクトのコンストラクターをチェーンする

オブジェクトのコンストラクターをチェーンするには、call()メソッドを使用できます。次の例を考えてみます

function Box(height, width) {
  this.height = height;
  this.width = width;
}

function Widget(height, width, color) {
  Box.call(this, height, width);
  this.color = color;
}

let widget = new Widget('red', 100, 200);

console.log(widget);Code language: JavaScript (javascript)

出力

Widget { height: 'red', width: 100, color: 200 }Code language: JavaScript (javascript)

この例では

• まず、2つのプロパティ、heightとwidthを備えたBoxオブジェクトを初期化します。
• 次に、Widgetオブジェクト内のBoxオブジェクトのcall()メソッドを呼び出し、thisの値をWidgetオブジェクトに設定します。

JavaScript call()メソッドを使用した関数ボローイング

次の例では、call()メソッドを関数ボローイングに使用する方法を示します

const car = {
  name: 'car',
  start() {
    console.log('Start the ' + this.name);
  },
  speedUp() {
    console.log('Speed up the ' + this.name);
  },
  stop() {
    console.log('Stop the ' + this.name);
  },
};

const aircraft = {
  name: 'aircraft',
  fly() {
    console.log('Fly');
  },
};

car.start.call(aircraft);
car.speedUp.call(aircraft);
aircraft.fly();Code language: JavaScript (javascript)

出力

Start the aircraft
Speed up the aircraft
FlyCode language: JavaScript (javascript)

仕組み

まず、1つのプロパティ名と3つのメソッドstart、speedUp、stopを持つ車オブジェクトを定義します

const car = {
  name: 'car',
  start() {
    console.log('Start the ' + this.name);
  },
  speedUp() {
    console.log('Speed up the ' + this.name);
  },
  stop() {
    console.log('Stop the ' + this.name);
  },
};Code language: JavaScript (javascript)

次に、1つのプロパティ名とメソッドを持つ航空機オブジェクトを定義します

const aircraft = {
  name: 'aircraft',
  fly() {
    console.log('Fly');
  },
};Code language: JavaScript (javascript)

3番目に、車オブジェクトのstart()メソッドとspeedUp()メソッド、および航空機オブジェクトのfly()メソッドを呼び出します。ただし、航空機をstart()メソッドとspeedUp()メソッドの最初の引数として渡します

car.start.call(aircraft);
car.speedUp.call(aircraft);
aircraft.fly();Code language: JavaScript (javascript)

start()メソッドとspeedUp()メソッド内で、thisが車オブジェクトではなく、航空機オブジェクトを参照します。そのため、this.nameは文字列'aircraf'を返します。したがって、メソッドは次のメッセージを出力します

Start the aircraft
Speed up the aircraftCode language: plaintext (plaintext)

技術的には、aircraft オブジェクトは car オブジェクトの start() と speedUp() メソッドを借用しています。そして、関数借用とは、あるオブジェクトが別のオブジェクトのメソッドを使用することを指します。

次の例は、arguments オブジェクトが call() 関数経由で Array.prototype の filter() メソッドを借用する方法を示しています。

function isOdd(number) {
  return number % 2;
}

function getOddNumbers() {
  return Array.prototype.filter.call(arguments, isOdd);
}

let results = getOddNumbers(10, 1, 3, 4, 8, 9);
console.log(results);Code language: JavaScript (javascript)

出力

[ 1, 3, 9 ]Code language: JavaScript (javascript)

仕組み

まず、数が奇数の場合に true を返す isOdd() 関数を定義します。

function isOdd(number) {
  return number % 2;
}Code language: JavaScript (javascript)

次に、任意の数の引数を応答する getOddNumbers() 関数を定義し、奇数のみを含む配列を返します。

function getOddNumbers() {
  return Array.prototype.filter.call(arguments, isOdd);
}Code language: JavaScript (javascript)

この例では、arguments オブジェクトは Array.prototype オブジェクトの filter() メソッドを借用します。

第三に、getOddNumbers() 関数を呼び出します。

let results = getOddNumbers(10, 1, 3, 4, 8, 9);
console.log(results);Code language: JavaScript (javascript)

このチュートリアルでは、JavaScript の call() メソッドとそれをより効率的に使用する方法について学習しました。