本記事は一人アドベントカレンダー企画の一つです。
30代未経験エンジニアが25日後にJavaScriptをマスターするカレンダー
JAVASCRIPT.INFOを元にJavaScriptを勉強していき、そこで学んだ知識をアウトプットしていきます。
２５日でJAVASCRIPT.INFOをやりきり、未経験エンジニアがJavaScriptをマスターする過程を投稿していきます。
８.1 プロトタイプ継承
知らない単語
- リテラルとは
- 定数の事
学んだこと
プロトタイプ継承は
元のオブジェクトを僅かに変更した新しいオブジェクトを作った時、メソッドのコピーや再実装ではなく、その上に新しいオブジェクトを作成することで、元のオブジェクトが持っているものを再利用するので、それを補助する事
JavaScriptのオブジェクトはPrototypeプロパティを持っており、それは別のオブジェクトかnullである
Prototypeプロパティにアクセスするために obj.proto を使うことができ、Prototypeによるオブジェクトの参照は「プロトタイプ」と呼ぶ
objのプロパティを読む、またはメソッドを呼び出したいが、存在しない場合はプロトタイプの中で見つけようとする
書き込み、削除操作はオブジェクトに対して直接動作し、プロトタイプを使わない
感想
プロパティを読んだりメソッドを呼ぶ時に何を使うか、どんな処理の流れになるかをしっかり覚えておく。
８.2 F.prototype
知らない単語
- 無し
学んだこと
新しいオブジェクトは new F() のように、コンストラクタ関数で生成でき、
F.prototype がオブジェクトの場合、new 演算子は新しいオブジェクトでPrototypeをセットする
F.prototype は F 上の prototype と名付けられた通常のプロパティを意味している事を間違えないように気をつける、用語としてのプロトタイプとは別である
例として
let animal = {
eats: true
};
function Rabbit(name) {
this.name = name;
}
Rabbit.prototype = animal;
let rabbit = new Rabbit("White Rabbit"); // rabbit.__proto__ == animal
alert( rabbit.eats ); // true
Rabbit.prototype = animal の設定は、new Rabbit が生成される時、その Prototype へ animal を割り当てる
- デフォルトの F.prototype, constructor プロパティ
通常のオブジェクトでは、prototype は特別なものではない
let user = {
name: "John",
prototype: "Bla-bla" // no magic at all
};
すべての関数は、prototypeプロパティを持っている
デフォルトの prototype は constructor というプロパティだけを持つオブジェクトで、関数自体を指す
感想
初心者だと、F.prototypeの prototype と用語としてのプロトタイプが別物だと気付けない可能性があるので、間違えないように覚えておきたい。
８.3 ネイティブのプロトタイプ
知らない単語
- 無し
学んだこと
- Object.prototype
空のオブジェクトを出力する
let obj = {};
alert( obj ); // "[object Object]" ?
obj は空であり、文字列 "[object Object]" を生成するコードは toString メソッドである
obj = {} は obj = new Object() と同じで、Object.prototype を持っている
- プリミティブ
プリミティブもラッパーオブジェクトのプロトタイプにメソッドを保持する
Number.prototype, String.prototype, Boolean.prototypeなど
undefined と null にはラッパーオブジェクトは無い
- プロトタイプ
組み込みのプロトタイプを変更したり、新しいメソッドを実装することができるが、変更はしない方がよい
感想
空のオブジェクトを出力する方法で、objがObject.prototypeを持っている事や[object Object]を生成するメソッドの使用方法など、処理の流れや使うメソッドをしっかり覚えておきたい。
８.4 proto なしでの プロトタイプ メソッド, オブジェクト
知らない単語
- ディスクリプタ
- プログラムからファイルを操作する際、操作対象のファイルを識別・同定するために割り当てられる番号の事
学んだこと
下記はプロトタイプをセットアップしたり直接アクセスするためのメソッドである
Object.create(proto[, descriptors]) – 与えられた proto を [[Prototype]] として、任意のプロパティディスクリプタで空のオブジェクトを作る
Object.getPrototypeOf(obj) – obj の [[Prototype]] を返す
Object.setPrototypeOf(obj, proto) – obj の [[Prototype]] に proto をセットする
組み込みの proto は古くいので、エラーが発生する可能性もあり、あまり推奨されない
- “非常にシンプルな” オブジェクト
オブジェクトはキー/値ペアを格納するための連想配列として使うことができる
ユーザから提供された キーを格納する場合、「proto」以外はうまく動作する
「proto」は [[Prototype]] の getter/setterであり、Object.prototype に存在するが、Object.create(null) によってプロトタイプなしのオブジェクトを作ればキーとしての「proto」の問題は無くなる
感想
使用するメソッドも多い上に、「proto」はオブジェクトの中でも特殊だと思うので、特性をちゃんと理解して正しく使いたい。
最後に
[[Prototype]]の役割や使用するメソッドなどが多く、混乱してしまいそうなので、整理してもう1度この章を復習して次に進んでいく。