Function.prototype.call()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
call()
メソッドは、 this
の値と、独立して提供された引数によって関数を呼び出します。
試してみましょう
構文
func.call([thisArg[, arg1, arg2, ...argN]])
引数
thisArg
省略可-
func
が呼び出されたときにthis
として使用される値です。 arg1, arg2, ...argN
省略可-
呼び出し先の関数に渡される引数です。
返値
this
の値と引数を指定して関数を呼び出した結果です。
解説
call()
はあるオブジェクトに所属する関数やメソッドを、別なオブジェクトに割り当てて呼び出すことができます。
call()
は関数やメソッドに this
の新しい値を提供します。 call()
によって、いったんメソッドを書いてから、新しいオブジェクトへメソッドを書き直さずに他のオブジェクトへと継承することができます。
メモ:
このメソッドの構文は apply()
とほぼ同じですが、基本的な違いは call()
が引数リストを受け取るのに対して、 apply()
は引数の単一の配列を受け取る点です。
例
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";
}
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' のプロパティは読めない
仕様書
Specification |
---|
ECMAScript Language Specification # sec-function.prototype.call |
ブラウザーの互換性
BCD tables only load in the browser