220404 TIL


TIL DAY 179



今日学んだこと


✔¥JavaScript復習!

1.オブジェクト作成者関数とプロトタイプ


JavaScript入門コースで重要な役割を果たしているので、それを完璧に理解しましょう.
開始する前に、オブジェクト作成者であることを理解します.

オブジェクトコンストラクション関数(Object Constructor Function)は?

  • 関数を使用すると、新しいオブジェクトを作成し、挿入したい値または関数を実装できます.
  • 一般にオブジェクトジェネレータを使用する場合、関数の名前は大文字で始まります.新しいオブジェクトが作成された場合は、newキーを前に付けます.単純な例)
    function Animal(type, name, sound) {
      this.type = type;
      this.name = name;
      this.sound = sound;
      this.say = function() {
        console.log(this.sound);
      };
    }
    
    const dog = new Animal('개', '멍뭉이', '멍멍');
    const cat = new Animal('고양이', '냐옹이', '야옹');
    
    dog.say();
    cat.say();
    結果は...
    멍멍
    야옹
    上記のコードを参照してください.dogが持つsay関数とcatが持つsay関数は、コードが同じ場合、オブジェクトを作成するたびに関数が更新されます.sayに設定します.
    前述したように、同じオブジェクトコンストラクション関数を使用する場合、特定の関数または値を繰り返し使用することをプロトタイプと呼ぶことができます.

    プロトタイプ


    JavaScriptでは、すべてのオブジェクトが親の役割を果たすオブジェクトに関連付けられます.これは、親オブジェクトのpropertyまたはメソッドを継承して使用できるオブジェクト向けの継承コンセプトと同様です.
    これらの親オブジェクトをプロトタイプオブジェクトまたはプロトタイプ(Prototype)と略称します.
    Prototypeオブジェクトは、コンストラクション関数によって作成された各オブジェクトに対して共有構成を提供するために使用されます.
    プロトタイプはオブジェクトコンストラクション関数の下にあり、次の例に示します.
    .prototype.「必要な鍵」=入力コードで設定できます.
    例)
    function Animal(type, name, sound) {
      this.type = type;
      this.name = name;
      this.sound = sound;
    }
    
    Animal.prototype.say = function() {
      console.log(this.sound);
    };
    Animal.prototype.sharedValue = 1;
    
    const dog = new Animal('개', '멍뭉이', '멍멍');
    const cat = new Animal('고양이', '냐옹이', '야옹');
    
    dog.say();
    cat.say();
    
    console.log(dog.sharedValue);
    console.log(cat.sharedValue);
    結果は...
    멍멍
    야옹
    1
    1

    オブジェクト作成者の継承の取得


    たとえば、DogとCatというオブジェクトジェネレータを作成するとします.
    また,オブジェクト作成者がAnimalの機能を再利用すれば,以下のように実現できる.
    例)
    function Animal(type, name, sound) {
      this.type = type;
      this.name = name;
      this.sound = sound;
    }
    
    Animal.prototype.say = function() {
      console.log(this.sound);
    };
    Animal.prototype.sharedValue = 1;
    
    function Dog(name, sound) {
      Animal.call(this, '개', name, sound);
    }
    Dog.prototype = Animal.prototype;
    
    function Cat(name, sound) {
      Animal.call(this, '고양이', name, sound);
    }
    Cat.prototype = Animal.prototype;
    
    const dog = new Dog('멍멍이', '멍멍');
    const cat = new Cat('야옹이', '야옹');
    
    dog.say();
    cat.say();
    結果は...

    新しく作成したDogとCat関数でAnimalを使用します.私はcallを呼び出しています.このとき、最初のパラメータにはthisとAnimalオブジェクトジェネレータ関数に必要なパラメータが含まれている必要があります.
    プロトタイプを共有する必要があるため、継承されたオブジェクトジェネレータ関数を作成すると、プロトタイプ値は親関数のAnimalとして使用されます.プロトタイプに設定します.

    プロトタイプチェーン


    オブジェクトは、そのプロトタイプオブジェクトのプロトタイプにアクセスできます.プロトタイプオブジェクトを探し始めたばかりではなく、オブジェクトからプロトタイプにアクセスしたときに、自分がプロトタイプを持っていない場合は、プロトタイプオブジェクトにプロトタイプが存在するかどうかを探します.
    また,自分のプロトタイプオブジェクトにもそのプロトタイプがない場合は,より上位のプロトタイプオブジェクトでそのプロトタイプが検索され,ある場合はそれが読み込まれる.
    このプロセスにより、最終的にすべてのオブジェクトの親が...
    Object.Prototypeにアクセスすることもあります.この一連のアクセスプロセスはPrototype Chiningと呼ばれます.
    簡単に言えば、仮想的な絆と考えられます.
    例)
    var obj = new Object(); // 이 객체의 프로토타입은 Object.prototype이다.
    
    var arr = new Array(이다);  // 이 객체의 프로토타입은 Array.prototype이다.
    
    var date = new Date();  // 이 객체의 프로토타입은 Date.prototype이다.
    でもObject.プロトタイプオブジェクトにはプロトタイプはありません.プロトタイプは継承されません.
    Object.プロトタイプオブジェクトは、すべてのプロトタイプチェーンの最上位に存在するプロトタイプです.
    チップ!
    したがって、デフォルトでは、JavaScriptオブジェクトはすべてObjectです.プロトタイプオブジェクトをプロトタイプとして継承します.最後:
  • は思ったより私のよく知らない部分が分かったので気持ちが良かったです.
  • プロトタイプは非常に重要です.