JavaScriptでproto VS.prototypeを比較する

SOF - __proto__ VS. prototype

__proto__は、チェーンによる検索方法等に用いられる実際のオブジェクトである.

prototypeは、newでインスタンスを作成するときに__proto__を作成するオブジェクトです.

function Foo() {}
console.log(new Foo().__proto__ === Foo.prototype); // true, 인스턴스의 __proto__와 함수의 prototype은 같다
console.log(new Foo().prototype === Foo.prototype); // false, 인스턴스의 prototype과 함수의 prototype은 다르다.
console.log(new Foo().prototype === undefined); // true, 인스턴스의 prototype은 undefined이다(즉, 없다?).
console.log(new Foo() instanceof Foo); // true
console.log(new Foo() instanceof Object); // true
console.log(new Foo().__proto__.__proto__ === Object.prototype); // true
console.log(Foo.__proto__ === Function.prototype); // true

console.log(new Foo().__proto__); //  Foo.prototype과 동일하다
/* {constructor: ƒ}
	constructor: ƒ Foo
	[[Prototype]]: Object */
console.log(Foo.prototype.constructor); // Foo, 함수 정의 반환
console.log(Foo.prototype.__proto__); // {}, 빈 객체 반환,  함수이므로 root level인 Object.prototype을 가리킨다

関数定義コードを実行すると、JavaScriptはこの関数にprototypepropertyを追加します.このprototypepropertyは、constructorと__proto__の2つのpropertyオブジェクトです.
-ブラウザでコンソールを使用して撮影すると、__proto__が表示されず、[[Prototype]]しか表示されません.これは何ですか?実は両者は同じです.正確には、__proto__は、ブラウザ対[[Prototype]]がサポートするgetterである.[[Prototype]]はプライベート接続であり、直接アクセスできません

prototypepropertyはインスタンスでは使用できません.関数でのみ使用できます.

インスタンスは__proto__propertyによって関数のprototypepropertyを参照する.

関数__proto__propertyは、より高いレベルの機能のprototypepropertyを参照します.したがって、異なる関数の__proto__propertyを比較することによって、それらが同じであることを決定することができる.

すなわちprototypepropertyは、格納された実際のオブジェクト__proto__propertyの青写真にすぎない.言い換えれば、prototypeはコンストラクション関数(コンストラクション関数)で使用され、正しい用語"prototypeToInstall"を使用すれば誤解は生じない.

逆に__proto__で定義されている正しい用語は"installedPrototype"であるべきであり、これにより理解が容易になる.

整理後、newキーワードを使用してインスタンスを作成すると、次のようなことが起こります.

function SetName(name) {
	this.name = name;
}
const marco = new SetName("Marco");

空の新しいオブジェクトを作成します.

marcoは__proto__propertyを作成し、その__proto__propertyはSetNameのprototype|を指す.

1で作成された新しいオブジェクトのコンテキストSetName.prototype.constructor(=SetName関数定義)が実行(実行)され、これらの関数定義に基づいて「Marco」文字列が新しいオブジェクトに渡される「name」propertyが新しいオブジェクトに追加されます.

constmarco新しいオブジェクトを指定して返します(最初に作成)...

結論:インスタンスは__proto__propertyのみが正しく、クラスと構造関数はprototypepropertyもある.インスタンスの__proto__propertyは、クラスまたは構造関数のprototypeを指す.(斜角を追加すると、クラスとコンストラクション関数の__proto__propertyはルートレベルのFunction.prototypepropertyを指します.

また,FunctionとObjectのプロトタイプ関係を아담과 이브にたとえた.( SOF - __proto__ VS. constructor.prototype )Objectはイブ、Functionはアダム.アダム(Function)は彼の肋骨(Function.prototype)でイブを創造した(Object).アダム(Function)は誰が作ったのですか.-Javascript言語を創造した人!-
したがって,以下の比較結果はいずれも真である.

console.log(Object.__proto__ === Function.prototype); // true
console.log(Function.prototype === Function.__proto__); // true, 그 위는 없다.
console.log(Object.__proto__ === Foo.__proto__);  // true, 둘 다 Function.prototype을 참조한다.

例

class Foo {
    hello() {return '안녕하세요'}
}
class Bar extends Foo{
    #age;
    constructor(){
        super();
        this.name = "마르코";
        this.#age = 11;
    }
    
    getName(){return this.name + " 입니다"}
    get age(){return this.#age }
    static bye() {return '잘가요'}
}
const bar = new Bar();
console.dir(Foo);
console.dir(Bar);
console.dir(new Foo());
console.dir(new Bar());

コンソール結果