【JavaScript】関数とオブジェクト⑥ call,applyとthis

#はじめに

Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。

前回の記事

#目的

• 関数とオブジェクトについての理解を深める

#本題
###1.前回のおさらい

bind
"this"や引数の参照先を変更。
使用時点では実行しない。

call,apply
"this"や引数の参照先を変更。
同時に関数を実行する。

// aという関数を定義
function a(){
    // 関数の中でthisが7行目でbindされている
    console.log("hello " + this.name);
}
const b = a.bind({name: "キルア"});
// hello キルアと出力
b();

###callとapply

####例1

bindとcall、applyの比較

function a(){
    console.log("hello " + this.name);
}
// bindの中身のオブジェクトを変数killに格納
const kill = {name: "キルア"};

// bindの場合はb();がないと実行されなかった
const b = a.bind(kill);
b();
// applyの場合は第一引数に変数をいれれば実行までしてくれる
a.apply(kill);
// callの場合も同様
a.call(kill);

####例2

callとapplyの比較

#####callの場合

callでは第２引数以下に関数の引数を定義することができる

function a(name){
    // thisを削除して関数の引数にnameを定義
    console.log("hello " + name);
}
const kill = {name: "キルア"};
// 第２引数に「キルア」と入れると「hello キルア」と実行される
a.call(kill, "キルア");

#####applyの場合

applyでは第２引数以下に配列を定義できる

// nameの他に,name1を定義
function a(name,name1){
    console.log("hello " + name + ", " + name1);
}
const kill = {name: "キルア"};

// 配列の場合[]に入れ,name1がアルカにあたる
// 配列が展開されてそれぞれaの引数に渡っていく
a.apply(kill, ["キルア", "アルカ"]);

####例3

より実践的なapplyの利用方法

// 配列を定義
// １番大きい数字を取り出したい
const array = [1,2,3,4,5];
// Mathオブジェクトのメソッドmaxを使うとコンソールで2と出力される
Math.max(1,2)
// 数が多く展開するのが面倒な時applyを使う
// 第一引数にthisは必要ないのでnullにしておく
// 第二引数は配列を定義し、それを変数に代入
const result = Math.max.apply(null, array);
// ５と出力される
console.log(result);

// ES６以降では基本的には下記のように使う
// ...を３つ書くとMathの引数を１つずつ展開するという操作が行われる(apply消す)
const result = Math.max(...array);
console.log(result);

Mathについて

組み込み関数とは、JavaScrip側であらかじめ用意してくれているオブジェクトのことです。Mathオブジェクトは、組み込み関数の1つで、数値計算を扱う際に使います。

今日はここまで！

#参考にさせて頂いた記事

• 【JS】ガチで学びたい人のためのJavaScriptメカニズム
• JavaScriptでMathオブジェクトを使う方法【初心者向け】