tamakipedia

鎌倉でフロントエンドエンジニアをしています。Wordpress/Javascript/JQuery が得意で、現在React勉強中です!

【 javascript 】 prototype プロパティーの中身はどうなっているのか

オブジェクト思考言語の多くは「継承」を使ってオブジェクトを再利用しますが、

javascriptはプロトタイプという仕組みを使ってオブジェクトを生成しているそうです。

 

--- prototype はいつのまにか生成されている

prototype はオブジェクトを生成すると自動的に生成されます。

また、そのプロパティーは別のオブジェクトを参照します。

 

--- prototype は「暗黙の参照先」

実はこのプロパティーは console.log()で参照しても undefined を返します。

const r1 = new String("world");
const p1 = r1.prototype;
console.log(p1);  // undefined

 

--- prototype は getPrototypeOf()で参照可能に!

参照したいという要望を受け、プロパティーを参照できる関数が実現しました。

 

const r1 = new String("world");
const r2 = new String("Hello");

const p1 = Object.getPrototypeOf(r1);
const p2 = Object.getPrototypeOf(r2);

console.log(p1 === p2);   // true

 

中身を参照します。

Object.getOwnPropertyNames() で確認可能です。

 

const propatyName = Object.getOwnPropertyNames( p1 );
console.log(propatyName) 

 

すると何かしら(プロパティーが)配列で帰ってきました!!

これがprototypeの中身となります。

["length", "constructor", "anchor", "big", "blink", "bold", "charAt", "charCodeAt", "codePointAt", "concat", "endsWith", "fontcolor", "fontsize", "fixed", "includes", "indexOf", "italics", "lastIndexOf", "link", "localeCompare", "match", "matchAll", "normalize", "padEnd", "padStart", "repeat", "replace", "search", "slice", "small", "split", "strike", "sub", "substr", "substring", "sup", "startsWith", "toString", "trim", "trimStart", "trimLeft", "trimEnd", "trimRight", "toLocaleLowerCase", "toLocaleUpperCase", "toLowerCase", "toUpperCase", "valueOf"]   

おしまい!