call()メソッドは、指定されたこの値と1つ以上のパラメーターを使用して関数を呼び出します。
注:このメソッドの構文と関数はapply()メソッドに似ていますが、唯一の違いは、call()メソッドがパラメーターリストを受け入れるのに対し、apply()メソッドは複数のパラメーターを含む配列を受け入れることです。
callメソッドを使用して親コンストラクターを呼び出す
子コンストラクターでは、親コンストラクターのcallメソッドを呼び出すことで継承を実装できます。次の例では、FoodおよびToyコンストラクターを使用して作成されたオブジェクトインスタンスはすべて、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);
console.log(cheese.name) // "feta"
console.log(fun.name) // "robot"
callメソッドを使用して無名関数を呼び出す
次の例のforループでは、無名関数を作成し、関数のcallメソッドを呼び出して、この値を指定して各配列要素を使用して無名関数を実行します。この無名関数の主な目的は、各配列要素オブジェクトにprintメソッドを追加することです。このprintメソッドは、配列内の各要素の正しいインデックス番号を出力できます。もちろん、この値として配列要素を無名関数に渡す必要はありません(通常のパラメーターで問題ありません)。目的は、呼び出しの使用法を示すことです。
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);
}
//打印出:
// "#0 Lion: King"
// "#1 Whale: Fail"
callメソッドを使用して関数を呼び出し、コンテキストの「this」を指定します
次の例では、greetメソッドが呼び出されると、メソッドのこの値が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メソッドを呼び出しましたが、最初のパラメーターを渡しませんでした。最初のパラメーターが渡されない場合、この値はグローバルオブジェクトにバインドされます。
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(); // Cannot read the property of 'sData' of undefined