JavaScriptを学習した内容のメモ
クロージャ
クロージャは、組み合わされた（囲まれた）関数と、その周囲の状態（レキシカル環境）への参照の組み合わせです。
言い換えれば、クロージャは内側の関数から外側の関数スコープへのアクセスを提供します。
JavaScript では、関数が作成されるたびにクロージャが作成されます。
関数コンテキスト
実行中の関数内の変数・関数
arguments super this 外部変数
関数は実行可能なオブジェクトである
コールバック関数
他の関数に引数として渡される関数
function a(b) {
b();
}
function b(){
}
this
呼び出し元のオブジェクトへの参照を保持するキーワード
オブジェクトのメソッド
として実行される場合
'this' => 呼び出し元オブジェクト
関数
として実行される場合
'this' => グローバルオブジェクト
メモリ空間
hoge
hello → function
hoge.hello.bind↓
helloTom → function'
bind
bindによって'this'や引数を固定した新しい関数を作成。
↓
bindによるthisの束縛
'this'や引数の参照先を変更。使用時点で実行はしない
call, apply
'this'や引数の参照先を変更。同時に関数を実行する。
アロー関数
無名関数を記述しやすくした省略記法 ES6～追加
() => {}
コンストラクター関数
新しくオブジェクトを作成するための雛形となる関数
function A() {
this.prop = 0;
}
const obj = new A();
newで作成したオブジェクトを「インスタンス」という。
newでオブジェクトを作成することを「インスタンス化」という。
プロトタイプ
・オブジェクトに存在する特別なプロパティー
・コンストラクター関数と合わせて使用
インスタンス化した際にはprototypeの参照が__proto__にコピーされる
new演算子
コンストラクター関数からインスタンスを作成するために使用する演算子
instanceof
どのコンストラクターから生成されたオブジェクトかを確認する
プロトタイプチェーン
プロトタイプの多重形成をプロトタイプチェーンと言う。
プロトタイプ継承
別のコンストラクター関数のプロトタイプを受け継いで、機能を流用できるようにすること。
継承
別のコンストラクター関数を受け継ぐこと。
クラス(ES6)
コンストラクター関数をクラス表記で書けるようにしたもの。
↓
シンタックスシュガー
クラス継承(ES6)
他のクラスのプロパティーとメソッドを継承すること。
スーパー(ES6)
継承元の関数を呼び出すためのキーワード。
ビルトインオブジェクト
コード実行前にJSエンジンによって自動的に生成されるオブジェクト
String, Object
Number, Function
Math, Boolean
Date, Symbol
etc...
ラッパーオブジェクト
プリミティブ値を内包するオブジェクト
シンボル(ES6)
プロパティーの重複を避けるために、必ず一意の値を返す関数。
プロパティーの設定値
value 値
configurable 設定変更可能性
enumerable 列拳可能性
writable 値の変更可能性
演算子
値(オペランド)をもとに処理を行い、結果を返す記号。
A ? B
↑ ↑
オペランド
for...in
列挙可能プロパティーに対して順不同で反復処理を実行する。
プロトタイプチェーン内も列挙対象となる。
↓
object.heaOwnProperty()
Symbolとfor...in
Symbolで定義したプロパティーはfor...inで列挙対象にならない。
for...of(ES6)
イテレーターを持つオブジェクトの反復操作を行う。
イテレーター
反復操作を行う際に使用するオブジェクト
↓
反復可能オブジェクト(String,Array,Map,Setarguments,etc...)
Map, Set(ES6)
データを管理するための入れ物。
↓
コレクション
Object VS. Map
キー 文字列 制約なし
for...in 〇 ×
for...of × 〇
Array VS. Set
重複値 〇 ×
for...in 〇 ×
for...of 〇 〇
ジェネレーター
イテレーターを生成するための特殊な関数
↓
より簡略化して記述可能!
スプレッド演算子(ES6)
反復可能や列挙可能オブジェクトの展開を行う。
let a = [...array]
{}、[]の中で使用
残余引数(ES6)
実引数に渡された変数を配列にまとめる。
function(...args)
スプレッド演算子はイテレーターの操作に従う
スレッド
連続して実行される一本の処理の流れ。
Main Thread
Service Worker
Web Worker
メインスレッド
JavaScriptの実行とレンダリング(画面描写処理)を行う。
重い処理があると画面が更新されなくなる。
FPS
1秒間あたりの画面(フレーム)更新頻度
同期処理
同期処理ではメインスレッドでコードが順番に実行される。
同期処理では一つの処理が完了するまで次の処理には進まない。
非同期処理
非同期処理は一時的にメインスレッドから処理が切り離される。
タスクキュー
実行町の非同期処理の行列。
↓
非同期処理の実行順を管理!!
キューの仕組みを「先入れ先出し」という。
↓
FIFO(First in, First Out)
タスクキューに入った処理(タスク)が非同期で実行される。
Promise(ES6)
非同期処理をより簡単に、可読性が上がるように書けるようにしたもの。
Promise構文
new Promise
同期処理
).then(
非同期処理 (resolveを待つ)
).catch(
非同期処理 (rejectを待つ)
).finally(
非同期処理 (then、またはcatchを待つ)
);
プロミスチェーン
Promiseを使って非同期処理を順次実行すること。
マクロタスク
これまでのレクチャーでタスクキューと呼んでいたもの。
順番が回ってきたら一つずつのジョブを実行
setTimeout
setlnterval
requestAnimationFrame
マイクロタスク
タスクキューとは別で依存する非同期処理の待ち行列。
↓
ジョブキュー
順番が回ってきたらすべてのジョブを実行
Promise
queueMicrotask
MutationObserver
Await/Async(ES8)
Promiseを更に直感的に記述できるようにしたもの。
Async(ES8)
Promiseを返却する関数の宣言を行う。
Await(ES8)
Promiseを返却する関数の非同期処理が完了するまで待つ。
例外処理
エラーが発生した際に飛ぶ特別な処理。
try {
throw new Error()
} catch(e) {
// エラーハンドリング
} finally {
// 終了処理
}
モジュール(ES6)
ソースコードを機能毎に分割して、メンテナンスしやすくする仕組み。
↓
代表的なものにESMとCJSが存在する。
CommonJS(CJS)
Node.js
CommonJS
require / exports
ES Modules(ESM)
ECMAScript
ES Module
import / export
ESM VS. CJS
import/export require/exports
Browser Node.js
.mjs .cjs
import
モジュールの読み込みに使用
Export
モジュールの露出に使用
Strictモード(ES5)
通常のJavaScriptで許容されている一部の書き方を制限する。
Strivtモードの目的
・意図しないバグの混入の防止
・予約語の確保
・コードのセキュア化
Strictモードの有効化
"use strict"
ファイルの先頭、もしくは関数内の先頭行に記述
Proxy(ES6)
プロパティーの操作に独自の処理を追加するためのオブジェクト。
Reflect(ES6)
JSエンジンの内部の汎用的な関数を呼び出すメソッドが格納されているオブジェクト。
内部メソッドとReflect
内部メソッド Reflect
[[Get]] get
[[Set]] set
[[Delete]] deleteProperty
[[Construct]] construct
①内部メソッドを呼び出す関数の格納場所。
②Proxyと合わせて使用するため。
内部メソッドとの関係性
内部メソッド Reflect Proxy
[[Get]] get get
[[Set]] set set
[[Delete]] deleteProperty deleteProperty
[[Construct]] construct construct
WeakMap(ES6)
弱い参照でオブジェクトを保持するコレクション
キーは必ずオブジェクト
JSON
JSON.parse
JSON → Object
JSON.stringify
Object → JSON
Storage
ブラウザの保存領域にデータを格納するためのオブジェクト
↓
localStorage