JavaScriptのcall, apply, bind, ...スプレッド演算子について

JavaScriptのcall, apply, bind, スプレッド演算子についてまとめてみた。

call

callは特定のオブジェクトの外からthisの値を指定することができます。
このメソッドはどの関数オブジェクトに対しても呼び出すことができます。

例

const object1 = {
  name: "yasu",
  email: "[e-mail]"
}

function getName() {
  return this.name; // このままではundefinedになる。
}

console.log(getName()); // undefined
console.log(getName.call(object1)); // callによりobject1とthisが結び付けられる

output

undefined
yasu

次のようにobjectを書き換えることにも使えます

const object = {
  name: "yasu",
  email: "[e-mail]"
}

function update(name, email) {
  this.name = name;
  this.email = email;
  return this;
}

console.log(update.call(object, "example", "example.example.com")); // 後ろの２つはupdateの引数

output

{name: "example", email: "example.example.com"}

apply

applyはcallと同じような働きをしますが引数の扱いが異なります
applyは引数を配列として受け取ります

例

const object = {
  name: "yasu",
  email: "[e-mail]"
}

function update(name, email) {
  this.name = name;
  this.email = email;
  return this;
}

console.log(update.apply(object, ["example", "example.example.com"])); // 後ろの２つはupdateの引数

output

{name: "example", email: "example.example.com"}

スプレッド演算子(展開演算子)

スプレッド演算子(...)は、複数の引数、複数の要素を置かれる所で値を展開することができます。

上記例を使って例えると、

const object = {
  name: "yasu",
  email: "[e-mail]"
}

const newObject = ["example", "[e-mail]"];

function update(name, email) {
  this.name = name;
  this.email = email;
  return this;
}

console.log(update.call(object, ...newObject)); // 後ろの２つはupdateの引数

このようにcallを使ってapplyと同じように引数に配列を渡すことができるようになります。

bind

bindもthisの値を結びつけることができるのですが、その結びつきが永続的になります。

const object = {
  name: "yasu",
  email: "[e-mail]"
}

const object2 = {
  name: "maruyama",
  email: "[e-mail]"
}

const newObject = ["example", "[e-mail]"];

function update(name, email) {
  this.name = name;
  this.email = email;
  return this;
}
const updateObject = update.bind(object);// objectがthisに永続的に結び付けられる
console.log(updateObject.apply(object2, newObject)); //object2をupdateしようとしても...
console.log(object2); // thisはobjectに紐付いているためupdateされない。

output

{name: "example", email: "[e-mail]"}
{name: "maruyama", email: "[e-mail]"}

参考 初めてのJavaScript