最近、 JavaScript
をガンガンやっているので、その時のメモ。
基本型 互いに別物
参照型 互いに同じ場所を見てる
配列内 → 要素
オブジェクト → プロパティ
関数 → メソッド
undefinedは変数の値が定義されてないことを表す値
nullは空であるという状態を表すための値
⚠️ 実際のアプリ開発でバグの原因になることも多い。
ex1)
バックエンドをrubyで実装している例。
nameの返り値がundefined
の場合、
rubyはfalse
同じくnameの返り値がnull
の場合は
rubyはtrue
|
|
==演算子
はなんとか等しいと見なせないかとJSがあれこれ努力してくれる演算子なので、値の比較はなるべく===演算子
を使う。
JSでは、以下の値も暗黙的なfalseと見なされる。
上記以外の値はすべてがtrueとみなされます。
|
|
finalllyはrubyのensure
に似てる
JSでオブジェクトを利用するためには、インスタンス化しなければならないが、JSでは、リテラルをそのまま対応する組込みオブジェクトとして利用できるので、インスタンス化をほとんど意識することがない。
|
|
オブジェクトリテラルは{}を書くことで、新しいオブジェクトを作成できます。オブジェクトリテラルはオブジェクトの作成と同時に中身を定義できます。 オブジェクトのキーと値を:で区切ったものを {} の中に書くことで作成と初期化が同時に行えます。
|
|
オブジェクトのkeyの参照方法
|
|
|
|
後入れ先出し(LIFO: Last In First Out)のデータ構造。アプリの操作履歴を保存し、最後に実行した操作をまず取りだすみたいな用途で使われる。
push、popメソッドで実装できます。
先入れ先出し(FIFO: First In First Out)。最初に入った要素を最初に処理する。食品の陳列に似てる。
push、shiftメソッドで実装できます。
• function命令(関数宣言) → 関数getTriangleを直接定義している
• 関数リテラル → 「function (base, height) {…}」と名前のない関数を定義したうえで、変数getTriangle
に格納している。
関数リテラルは、宣言した時点では、名前を持たないことから匿名関数
、または無名関数
と呼ばれる。
|
|
|
|
構文
|
|
|
|
引数がない場合でも()
を省略することはできない。()
には関数を事項する
という意味も持っているから。
varだとブロックレベルのスコープが存在せず、ブロックを抜けたあとでも変数iが有効であり続ける。
|
|
letだとブロックスコープに対応した変数を宣言できる。
|
|
「…」演算子は、実引数で利用することで、for ...of
ブロックで処理できるオブジェクトを個々の値に展開できます。
|
|
代入先の変数もブランケットでくくっているのがポイント。
|
|
最もシンプルなクラス。
変数Memberに対して、空の関数リテラルを代入しているだけだが、これがJavaScriptのクラス。
|
|
このMemberクラスをインスタンス化するにはnew演算子
使う。
|
|
JavaScriptの世界では、「いわゆる厳密な意味でのクラス」という概念は存在しない。
JavaScriptでは関数(Functionオブジェクト)にクラスとしての役割を与えてる。
同一のクラスを元に生成されたインスタンスであっても、それぞれが持つメンバーは同一であるとは限らない
DOMで、あるノードを基点として、相対的な位置関係からノードを取得すること。
同一の要素/同一のイベントに対して、複数のイベントがハンドラーを紐付けられない。
同一要素の同一イベントに対して複数紐づけられるのはイベントリスナー
addEventlistenerメソッド
|
|
• onloadイベントハンドラー → コンテンツ本体と全ての画像がロードされたところで実行 • DOMContentLoadedインベント → コンテンツ本体がロードされたところで実行(=画像のロードを待たない)
ページの初期化処理は、DOMContentLoadedイベントリスナーで表すのが基本
HTML文字列を埋め込む必要がない場合は、まずtextContentプロパティ
を優先して利用する。
(インスタンス)オブジェクトを初期化するメソッドのこと。コンストラクターの名前は、普通の(=コンストラクタでない)関数と区別するために大文字
で始めるのが一般的です。
コンストラクターに戻り値は不要
|
|
プロパティの定義
|
|
JavaScriptにおいては、厳密にはメソッドという独立概念はなく、値が関数オブジェクトであるプロパティがメソッドとして見なされる
構文
|
|
関数を引数、戻り値として扱う関数のこと
this
はスクリプトのどこからでも参照できる特別な変数場所 | thisの参照先 |
---|---|
トップレベル(関数の外) | グローバルオブジェクト |
関数 | グローバルオブジェクト(strictモードではundefined) |
call/ applyメソッド | 引数で指定されたオブジェクト |
イベントリスナー | イベントの発生元 |
コンストラクター | 生成したインスタンス |
メソッド | 呼び出し元のオブジェクト(=レシーバーオブジェクト) |
プロトタイプにインスタンスを設定るすることで、インスタンス同士を「暗黙の参照」で連結し、互いに継承関係を持たせること。
イベントに対してその処理内容を定義するコードの塊(関数)のこと。
参考 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで