[JS]Prototypeの概念を理解する


prototype


JavaScriptは、ソースオブジェクトに基づいてコピーし、継承と同様の機能を実現するプロトコル・タイプに基づく言語です.
prototypeとは、JavaScript内のすべての関数に固有の属性を持つとともに、サブオブジェクトが自分のブランチオブジェクトを参照できるようにすることを意味します.
(コンストラクション関数)関数は、関数自体+2つのプロトタイプオブジェクトからなる集合です.
今はまだ意味が分かりにくい.
(私はこの文章を最後の文章に修正した.😁 今わかった.
const object = {};
const array = [];
const function = function () { };
function foo() [ }

まず、これらのオブジェクトを作成する方法を見てみましょう.
一般に、カッコ、角カッコ、関数宣言式、または関数式を使用して簡略化されます.
const object = new Object();
const array = new Array();
const function = new Function();
オブジェクトを簡単に作成すると
実際、JavaScriptはバックグラウンドでコンストラクション関数を使用してオブジェクトを作成しています.
つまり、オブジェクトは関数によって作成されます.

const instance = new Constructor


すべての関数にプロトタイプがあります.
コンストラクション関数を使用してインスタンスを作成および実行する場合にのみ、プロトタイプオブジェクトは特殊な機能を実行します.
newキーがない場合に通常の関数を呼び出すと、プロトコルタイプは機能を実行しません.
(newキーワードは関数の前にしか付加できません.)
詳細は以下の通り.

Constructor.prototype


図に示すように、コンストラクション関数とプロトタイプオブジェクトは互いに指向する密接な関係である.
プロトタイプとは?

  • すべての関数オブジェクトまたはすべての関数オブジェクトのみを持つプログラムであり、オブジェクトでもあります.
    (関数の作成方法にかかわらず、すべての関数があります.)

  • 関数の前にnewキーを付けてコンストラクション関数を定義すると、プロトタイプオブジェクトも同時に作成されます.
    これは、親オブジェクトコンストラクタを指します.

  • JavaScriptのすべてのインスタンスオブジェクトは、親オブジェクトのプロトタイプに存在する属性またはメソッドを使用できます.
    -インスタンスの作成時に親属性を使用すると継承されます.
    -インスタンスの作成後に親に属性が追加された場合、子インスタンスは親の属性を共有します.

  • prototypeにはconstructorpropertyがあり、構造関数を指す.
    さらに、すべてのオブジェクトには、親オブジェクトのプロトタイプを指す__proto__というpropertyがあります.Constructor.prototype.constructor & instance.__prot__これがプロトタイプベースの継承における重要な特性である.
  • コンストラクション関数があると、prototypeという属性/オブジェクトが生成されます.

    .prototype & .__proto__


    生活コード、参考Goingのprototype vs proto youtube講座グリーン
    コンストラクション関数とインスタンスを表すprotoはprototypeの構造を参照する図である.

    コンストラクション関数を使用してインスタンスオブジェクトを作成すると、protoプロパティを含むPropertyが作成されます.
    prototypeプロパティが関数のみを持つのとは異なり、protoプロパティはすべてのオブジェクトが持つプロパティです.
    (私はこの部分をよく理解していませんが、画像で表現して、突然分かりました:DGood)
    インスタンスオブジェクト内にプロパティが見つからない場合は、proto参照のプロトタイプオブジェクトでプロパティをナビゲートします.ない場合はundefinedを返し、ある場合は属性と(キー)値を取得できます.
    簡単に言えば、protoはprototypeへのリンクです.
    図には示されていませんが、関数を構築します.prototypeもオブジェクトなのでprotoプロパティがあります.そのまま上等な物体に乗って上がります.このようにproto属性を介して親プロトコルタイプに接続される形式がプロトコルタイプチェーンである.
    プロトタイプチェーンの上部はオブジェクトオブジェクトのオブジェクトです.Prototypeが既に配置されているため、すべてのオブジェクトはObject Prototypeに存在するすべてのプロパティを使用できます.Object.原型はすべての人の両親です.
    Object가 아담이라면 Object.prototype은 하와?!!
    thispostingにも言及されているが、例えば、上記の手順を順次検討する.
    var Fruit = function(name, color) {
      this.name = name;
      this.color = color;
    };
    
    
    var banana = new Fruit('바나나', 'yellow'); // banana 인스턴스 생성
    var strawberry = new Fruit('딸기'); // strawberry 인스턴스 생성
    
    
    console.log(banana); //Fruit {name: "바나나", color: "yellow"}
    
    console.log(strawberry); // Fruit {name: "딸기", color: undefined}
    
  • newキーワードは、コンストラクション関数(Constructor)を呼び出すために使用される.
    このとき,固有のプロトタイプオブジェクトも一緒に生成される.( Constructor.prototype )
  • new Fruit(); 
    Fruit.prototype
  • 「空のオブジェクト={}=새로운 instance」が作成されます.
  • banana는 Fruit의 인스턴스이다.
    3.instanceも、コンストラクション関数にprototypeプロパティがあるようにします.
    `proto`という属性が自動的に生成されます.これは個別のオブジェクトではありません.
  • Constructor.prototype === instance.__proto__*
  • instance.__proto__JavaScriptルールに従って親Constructor.prototypeを参照するため、プロトタイプオブジェクトのメソッドまたはプロパティにアクセスしてセルフテストを行うことができます.instance.__proto__およびConstructor.prototypeは最終的にコンストラクション関数を指すため、==演算子を使用して比較すると真の値が得られます.
    
    *--- Constructor.prototype ---*
    
    console.log(Fruit.prototype); 
    /* {constructor: ƒ}
     ▶ constructor: ƒ (name, color)
     ▶ __proto__: Object
    */
    
    *----- instance.__proto__ -----*
    
    console.log(banana.__proto__); 
    console.log(strawberry.__proto__);
    /* {constructor: ƒ}
     ▶ constructor: ƒ (name, color)
     ▶ __proto__: Object
    */
    ❕|子が親を指すこの属性を使用しないで、省略して使用します.
    バナナにはname、colorというProperty(属性)は直接作成されていませんが.
    プロトタイプはproperty、メソッドを参照するため、次のように同じpropertyを有します.
  • (ただし、関数自体にname属性があるため、Fruit.nameは関数自体の一意の名前Fruitである.__proto__それ以外に、Fruit.name = Fruit両者の間ではなくprototypeを定義する場合、それは関数のプライベート属性であるため、遺伝的ではない.(親の性格と見なせば良い)
  • 
    Fruit.prototype.name  → name이라는 프로퍼티를 가리킴
    Fruit.prototype.color → color라는 프로퍼티를 가리킴
    
    banana((__proto__)).name === banana.name → name이라는 프로퍼티를 가리킴
    // '바나나'
    banana((__proto__)).color === banana.color → color라는 프로퍼티를 가리킴
    // 'yellow'
    
    このとき、nameとcolorのthisはFruitです.생성자.속성の前のバナナ(proto)、バナナ(proto)ではありません.
    Fruit.prototype.name === banana.name>>同じプロパティを使用します.

    Point


    「new演算子」を使用してConstructorを呼び出すと、インスタンスが作成されます.
    この例の省略可能なプログラムprotoはConstructorのプロトタイプを参照する.
    ある家族は、父の名前が創建者で、母の名前が原型で、息子の名前が実例です.
    母も父も相手を愛しているので、それぞれに名前が刻まれているものがあります.
    息子の例では、母の名前だけを保存し、母を呼ぶしかないprotoという携帯電話がある.
    そして息子はお母さんのものを引き継いで勝手に使うことができて、お母さんが新しく買ったものもあります.
    一緒に使えます.
    インスタンスに属性がある場合は、オブジェクトで定義されたキー(属性)と値が使用されますが、ない場合はプロトタイプのキー(属性)と値が使用されます.
    function Person (name) {
      this.name = name;
    }
    
    Person.prototype.age = 20;
    
    const colki = new Person("colki");
    
    console.log(colki.age); // 20
    colkiインスタンスにはageというPropertyはありません.
    Person.prototypeを参照したので、そこの属性を見つけて使用しました.
    だからageの値を出力することができます.
    function Person (name) {
      this.name = name;
    }
    
    Person.prototype.age = 20;
    
    const colki = new Person("colki");
    
    ** 하지만 age라는 key에 대한 값을 준다면 **
    colki.age = 24;
    
    console.log(colki.age); // 24
    自分が持つ属性であれば、プロトタイプ出力値を参照する必要はありません.
    しかし.後で文法が現れたらPerson.prototype.age = 20;が表示されます.
    😐 錯覚を起こしやすいことがある.
    function Person (name) {
      this.name = name;
    }
    
    Person.age = 20;
    
    const colki = new Person("colki");
    console.log(colki.age); // --- ?
    これじゃ無意識の20!この呼び方がちょうどよい,もう一度見てみよう
    Person. console.log(colki.age); // undefinedageの間は空っぽです.そうだ原型はない
    オブジェクト/ポイント/アトリビュートとして直接追加すると、作成者のみが一意のアトリビュートを指定でき、インスタンスでは使用できません.
    したがって、上記の追加例は、コンソールウィンドウにundefinedを出力する.
    子を継承する目的がある場合は、プロパティを追加するときにコンストラクション関数を使用する必要があります.prototype.財産の形式で記入しなければならない.