Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

call

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

const object1 = {
  name: "yasu",
  email: "yyy@yyy.com"
}

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: "yyy@yyy.com"
}

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

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

output

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

apply

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

const object = {
  name: "yasu",
  email: "yyy@yyy.com"
}

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

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

output

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

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

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

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

const object = {
  name: "yasu",
  email: "yyy@yyy.com"
}

const newObject = ["example", "example@example.com"];

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

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

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

bind

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

const object = {
  name: "yasu",
  email: "yyy@yyy.com"
}

const object2 = {
  name: "maruyama",
  email: "maruyama@aya.com"
}

const newObject = ["example", "example@example.com"];

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: "example@example.com"}
{name: "maruyama", email: "maruyama@aya.com"}

参考 初めてのJavaScript

shinonomeinc
東京理科大学発ベンチャー。提携大学内にソフトウェア研究所を組織し、学生向けのTech教育を提供しています。
http://shinonome.io
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away