JavaScript/TypeScript勉強メモ
event
について理解を深めたい
event
のプロパゲーションを説明できるようになりたい。
オブジェクト
プロパティの集合
プロパティ
key : value の組
数値
IEEE 754標準で規定された64ビット浮動小数点形式
文字列
16ビット値の列
UTF 16エンコーディング
Symbol
文字列でないプロパティ名
条件付きプロパティアクセス (ES2020)
式?.識別子
JavaScriptではnull
とundefined
だけがプロパティを持たない値。
null
とundefined
に対して通常のプロパティアクセスを使った場合、TypeError
がスローされていまう。
条件付き呼び出し (ES2020)
関数名?.()
first defined 演算子 (??)
aに副作用が内場合、以下は等価
a ?? b
(a !== null && !== undefined) ? a : b
`||`演算子は最初にfalseと評価されない演算子を返す
ループ
for/of
イテラブルなオブジェクトに対して使う
for/in
プロパティをループ
オブジェクト
順序付けされていないプロパティの集合
オブジェクト自身のプロパティ以外に他のオブジェクトからプロパティを継承することができる。
この継承対象になるオブジェクトをプロトタイプという。
プロパティ属性
プロパティはプロパティ属性を持つ
- 書き込み可属性
- 列挙可属性
- 再定義可属性
デフォルトでall ok.
生成法
- オブジェクトリテラル
- new演算子
- Object.create()
ほぼすべてのオブジェクトがプロトタイプをもつが(__proto__
プロパティを持つということ?)、prototype
プロパティをもつオブジェクトは比較的少数。
プロトタイプをもたないオブジェクトの例 Object.prototype
←他には?
プロトタイプ
オブジェクトに関連付けられたオブジェクト
newとコンストラクタ呼び出しを使って生成されたオブジェクトはプロトタイプとしてコンストラクタ関数のprototypeプロパティを使う。
Object.create()
第一引数をオブジェクトのプロトタイプとして使用し、新しいオブジェクトを生成する。
メソッドの簡略記法
let square = {
area: function() { return this.side : this.side }
side: 10
}
let square = {
area(): { return this.side : this.side }
side: 10
}
配列
配列のインデックス 32ビットの整数値
配列の生成
Array.of()
引数で指定した値をもつ配列を返す
Array.from()
イテラブルなオブジェクトを指定
配列イテレーターメソッド
forEach()
第一引数に関数を渡す
要素ごとに指定された関数を呼び出す。
その関数には配列要素の値、配列要素のインデックス、配列自身を渡す
- map
- filter
- find
- findIndex
- every
- some
- reduce
- reduceRight
- flat
- flatMap
- concat
- push
- pop
- shift
- unshift
- slice
- splice
- fill
- copyWithin
- indexOf
- lastIndexOf
- includes
- sort
- reverse
関数
アロー関数
- 関数が定義された環境の
this
キーワードを継承する - 呼び出しコンテキストで定義されない
- prototypeプロパティをもたない
thisはキーワード
省略可能なパラメータとデフォルト値
fucntion foo(o, a = [] ) {
}
残余パラメータ
function foo(first, ...rest) {
}
callとapply
call()
やapply()
を使うことで、あるオブジェクトのメソッドであるかのように関数を呼び出せる。
callとapplyは引数の渡し方が違う
bind
オブジェクトに関数をbindする
Reactのクラスコンポーネントでよく使われていたっぽい。
関数の部分適用にも使える
クラス
同じプロトタイプオブジェクトからプロパティを継承する一覧のオブジェクトをクラスという。
モジュール
実装のカプセル化
- クラス、オブジェクト、クロージャを使ったモジュール
- require()を使ったNodeモジュール
- export import import()を使ったES6モジュール
- クラス、オブジェクト、クロージャを使ったモジュール
- require()を使ったNodeモジュール
関数を返す無名関数を定義してその場で実行することでvisibilityをコントロール
// returnされたものだけ使える
const stat =(fucntion() {
//....
return { mean, stddev };
}());
ES6モジュール
普通のJavaScriptスクリプトの場合、変数や関数、クラスをトップレベルに宣言した場合、すべてのスクリプトで共有されりグローバルなコンテクストに含まれる。モジュールを使った場合、ファイルごとに独自のプライベートなコンテキストを持つ。
- export
- expoert default
exportしたものは
import { ~~ } from './ '
export defalutしたものは
import (名前は自由) from './'
みたいにimportする。
import()
動的インポート
Promise
オブジェクトが返される
動的インポートが完了するとPromise
がfullfilledになる。
静的importでimport *と記述したときと同じようなオブジェクトが生成される。
import.meta.url
非同期JavaScript
非同期関数の難しさ
エラー処理
Promiseではエラーを扱う方法が標準化されている。
Promise
満たされた状態
失敗した状態
解決された状態
解決される = コールバックから値が戻される
戻された値がプロミスでなかったら、即座に満たされる。
戻された値がプロミスなら、満たされない
Webブラウザ上のJavaScript
Window
オブジェクトのhistory
プロパティにそのウィンドウのHistory
オブジェクトが格納される
Historyオブジェクト
ドキュメントのリスト
forward()
back()
Web Component
Custom Element
イベントループの理解
タスクやマイクロタスクを処理したりDOMを処理してレンダリングしたりする単一のループ(=イベントループ)が存在する。
fetchがネットワークアクセスしたり、タイマーの起動などは別のスレッドで行われる
イベントループの振る舞い
タスクキューにタスクがあれば、1つ取り出し実行する。
マイクロタスクキューのタスクが無くなるまで、1つずつ取り出し実行する。
描画を更新する。
タスクキューに余裕がある場合は RequestIdleCallback の仕様に基づきバックグラウンドタスクをキューに積む。
最初に戻る。
から引用
タスクキューとマイクロタスクキュー
発火したイベントのコールバックやsetTimeoutのコールバックなどはタスクキューにエンキューされる(確証はない)
Promsie.thenはコールバックをマイクロタスクキューにエンキューされる(awaitも同様)
Promiseの振る舞い
Pending状態のPromiseのthenが呼ばれるとfufill reaction listというところに入れられる。そのPromiseが満たされるとジョブキューにエンキューされる。