今週やったこと

・演習問題を解く
・javascriptの学習
今週もjavascriptのメモまとめをかるく書きたいと思います。
今日はthisとbindについてです。

thisとbindのメモ

サンプルソース

window.name = 'a';
const hoge = {
  name: 'hoge',
  log: function (num) {
    console.log(num); //引数の表示する
    console.log(this.name); // hogeオブジェクトのnameを表示する
  },
};
hoge.log(1); //hogeオブジェクトのlogを実行する

const hoge1 = hoge.log; //関数の参照先を代入している
hoge1(1); //グローバルオブジェクトのaが表示される

const hoge2 = hoge.log.bind(hoge, 2);
hoge2(); //hogeオブジェクトのhogeが表示される

thisについて

使用するスコープによってあらわすものが変わる。
スクリプトファイル範囲でのthis
→グローバルオブジェクトで定義されている変数（window.name）
関数スコープ範囲でのthis
→関数オブジェクトで定義されている変数（hoge.name）

bindについて

関数を呼び出すときにオブジェクトを指定して呼び出すことができる。
const hoge2 = hoge.log.bind(hoge, 2);
こうすることで、hoge.logをhogeオブジェクトで実行するようにすることができる。（hoge.logと同様の挙動となる）