8.1 メソッド call
JavaScriptのcall、bind、applyメソッドは、関数の実行コンテキストを管理する上で重要な役割を果たしていて、関数を呼び出すときにthisの値を設定することができるんだよね。これらのメソッドは特にオブジェクトや関数型プログラミングを扱う際に便利で、コードを柔軟に管理するための強力な道具を提供してくれるんだ。それぞれの詳細と使い方の例を見ていこう。
callメソッドは、指定されたthisの値とカンマ区切りの引数を使って関数を呼び出すよ。これで、関数が実行されるコンテキストを明示的に指定できるんだ。
シンタックス：
func.call(thisArg, arg1, arg2 ...);
例：
この例では、greet関数がpersonというコンテキストで呼び出され、そのためにpersonオブジェクトのnameプロパティを使えるようになるんだ。
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'John' };
greet.call(person, 'Hello', '!'); // Output: Hello, John!
8.2 メソッド apply
applyメソッドはcallと似ているけど、引数を配列として渡すんだ。関数に渡したい引数が配列としてあるときに便利なんだよね。
シンタックス：
func.apply(thisArg, [argsArray]);
例：
この例は前のと似てるけど、引数が配列として渡されてるんだ。
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'John' };
greet.apply(person, ['Hello', '!']); // Output: Hello, John!
8.3 メソッド bind
bindメソッドは、新しい関数を作成して、呼び出されたときにthisの値を設定するんだ。bindに渡された引数は新しい関数の中で固定されるんだ。つまり、固定コンテキストの関数を作ることができるんだよ。
シンタックス：
const boundFunc = func.bind(thisArg, arg1, arg2 ...);
例：
この例では、新しい関数boundGreetが作成され、それが常にpersonオブジェクトのコンテキストで実行されるようになるんだ。
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'John' };
const boundGreet = greet.bind(person, 'Hello');
boundGreet('!'); // Output: Hello, John!
8.4 メソッドの使い方の詳細な解説
1. callを使ったメソッドの継承：
callメソッドは、あるオブジェクトのメソッドを他のオブジェクトに継承させるのによく使われるよ。これで明示的に継承せずにメソッドやプロパティを借りてくることができるんだ。
この例では、ProductコンストラクタがFoodオブジェクトのコンテキストで呼び出され、nameとpriceのプロパティを継承できるようになってるんだよ。
function Product(name, price) {
this.name = name;
this.price = price;
}
function Food(name, price, category) {
Product.call(this, name, price);
this.category = category;
}
const cheese = new Food('Cheese', 5, 'Dairy');
console.log(cheese); // Output: Food { name: 'Cheese', price: 5, category: 'Dairy' }
2. applyを使って配列の引数を渡す：
applyメソッドは、別々のパラメータを受け取る関数に配列の引数を渡したいときに便利なんだ。
ここでは、配列numbersが関数sumに個別の引数として渡されるんだ。
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum.apply(null, numbers)); // Output: 6
3. bindを使って固定コンテキストの関数を作成する：
bindメソッドによって、固定されたコンテキストを持つ関数を作成することができるんだ。イベントやコールバックを扱うときに特に便利だよ。
ここでは、getX関数がmoduleオブジェクトにbindを使って結びつけられ、関数を呼び出すときにxの値を正しく取得できるようになっているんだ。
const module = {
x: 42,
getX: function() {
return this.x;
}
};
const unboundGetX = module.getX;
console.log(unboundGetX()); // Output: undefined
const boundGetX = unboundGetX.bind(module);
console.log(boundGetX()); // Output: 42
8.5 実生活での例
callを使った配列メソッドの借用の例：
この例では、callを使って配列のforEachメソッドがargumentsオブジェクトに適用されるよ。
function printArguments() {
Array.prototype.forEach.call(arguments, function(item) {
console.log(item);
});
}
printArguments(1, 2, 3); // Output: 1, 2, 3
applyを使った配列の結合の例：
ここでは、applyを使ってpushメソッドを使って2つの配列を結合してるんだ。
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
Array.prototype.push.apply(array1, array2);
console.log(array1); // Output: [1, 2, 3, 4, 5, 6]
bindを使った部分関数の作成の例：
double関数がbindを使って最初の引数2を固定した状態で作成されるよ。
function multiply(a, b) {
return a * b;
}
const double = multiply.bind(null, 2);
console.log(double(5)); // Output: 10
GO TO FULL VERSION