Function オブジェクトのメソッド

call() 関数の呼び出し

call(this, ...args)を使うと、 thisと0個以上の引数argsを渡して関数オブジェクトを実行できます。

第一引数は関数の中でthisで参照できます。thisに渡したオブジェクトは、関数内でもそのまま使われます。

function calcArea() {
    this.area = (Math.PI * Math.pow(this.r, 2)).toFixed(2);
}

let circle = {
    r: 4,
    area: null
};
calcArea.call(circle);
console.log(circle); // {r: 4, area: "50.27"}

ただし、thisにnullまたはundefinedが渡された場合の動作は、 状況によって異なります。

ES3 ではnullまたはundefinedが渡された時には、 グローバルオブジェクトに差し替えられました。

ES5 以降ではthisに渡された値はそのまま使われます。ただし strict モードではない場合にはグローバルオブジェクトに変換されます。

'use strict';

function hello(name) {
    console.log(this); // null or Window
    console.log(`Hi, ${name}!`); // Hi, Mike!
}

hello.call(null, 'Mike');

apply 関数の呼び出し (配列引数)

apply(this, args)は call()と同じように関数を呼び出します。ただし、apply関数は引数を配列で受け取ります。

function add(a, b) {
    return a + b;
}

let a = add.apply(null, [1, 3]);
console.log(a); // 4

thisにnullやundefinedが渡された場合の扱いもcall()と同様であり、 strictモードの時はそのまま、そうでない時はグローバルオブジェクトに変換されます。

apply()は配列ではなく、配列のようなコレクション(インデックスと長さがあるコレクション)を受け取ることができます。

function add(a, b) {
    return a + b;
}

const param = {
    0: 5,
    1: 7,
    length: 2
};

let a = add.apply(null, param);
console.log(a); // 12

bind() this と引数を関連付けした関数オブジェクトを作成

bind(this, ...args)は thisとargsを関連付けした関数オブジェクトを生成します。

thisとargsはそれぞれ、 関連付けするオブジェクトにthis、引数として渡されます。

function add(label) {
    let c = this.a + this.b;
    return `${label}: ${c}`;
}

const x = {
    a: 10,
    b: 20
};

let f = add.bind(x, 'Result');
let c = f();
console.log(c); // Result: 30