【IT】ReactのためのJavaScript基礎構文の復習⑤

T A

2023年6月2日 19:10

皆さま
こんにちは

今日も
JavaScriptライブラリであるReact.jsで
前提となるJavaScriptの基礎構文を復習します。

今回の学習内容

１．アロー関数とthisとbindの関係
２．コールバック関数とthisの関係
を学習します。

今回の環境

任意のディレクトリに
・index.html
・main.js
の二つのファイルを用意します。

・index.html (main.jsへは都度記入します）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScriptの補習</title>
</head>
<body>
    <h1>JavaScriptの補習</h1>
    <script src="main.js"></script>
</body>
</html>

index.htmlをVScodeで開き、Go Liveで簡易Web画面を開き、
右クリックで検証を開きます。

１．アロー関数とthisとbindの関係

アロー関数は、単なる無名関数の省略形と考えておりましたが、
無名関数と比べて
・this
・arguments
・new
・prototype
が使えません。

アロー関数は、bindを利用してもthisを変更することが出来ません。
これは、そのコンテキスト内であったとしてもthisをとりません。

例としてアロー関数と通常の関数でのthisの値を確認します。
・main.js

window.name = 'ウィンドウ太郎';

const aisatu = {
  name: 'This太郎',
  // アロー関数
  kontiwa: () => {
    console.log('こんちは(アロー) ' + this.name);
  },
  // 通常の関数
  kontiwaFunction() {
    console.log('こんちは(関数) ' + this.name);
  }
}

aisatu.kontiwa();
aisatu.kontiwaFunction();

２．コールバック関数とthisの関係

コールバック関数の場合は、
・オブジェクトのメソッド
　として実行される場合は、
　thisは　＝＞　呼び出し元オブジェクト

・関数
　として実行される場合は、
　thisは　＝＞　グローバルオブジェクトとなります。

例としてそれぞれの場合でのthisの値を確認します。
・main.js

window.name = 'ウィンドウネーム'

const aisatu = {
  name: 'トム太郎',
  kontiwa: function() {
    console.log('こんにちは、' + this.name);
  }
}
console.log('--------------------------')
console.log('オブジェクト：thisは、呼び出し元オブジェクト')
aisatu.kontiwa();

function callBkFunction(yobidashi) {
  yobidashi();
}

console.log('--------------------------')
console.log('コールバック：thisは、グローバルオブジェクト')
callBkFunction(aisatu.kontiwa);

では