はじめに
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つで、数値計算を扱う際に使います。
今日はここまで！