JavaScript Prototypeについて

こんにちは!この文章ではprototypeの概念を理解してみましょう.

プロトタイプとは?

プロトタイプは、オブジェクトに表示されない非表示の場所に値を配置し、任意の場所で値を使用できます.私たちが開発した多くのJavaScriptメソッド(toString、push、sortなど)は、このプロトタイプに基づいています.

コードの表示

      function Student(name, age, height) {
        this.name = name;
        this.age = age;
        this.height = height;
        this.sayHi = function () {
          console.log(
            `안녕하세요 저의 이름은 ${name}이고 나이는 ${age} 이며, 키는 ${height}입니다.`
          );
        };
      }

      Student.prototype.gender = "남자";

      let student1 = new Student("홍길동", "22", "181");
      let student2 = new Student("박새로이", "28", "183");
      let student3 = new Student("한지평", "32", "184");

      console.log(student1.gender);
      //남자

Studentという名前のジェネレータが作成され、その下に性別という名前のプロトタイプ値が与えられます.結果コンソールのstudent 1性別を撮ってみると男性でした
不思議なことですよね?Studentは性別というキーがないのに学生1性別が印刷されているので、値が出力されます.
原型が見えない場所で直接性別の値を作ったので、近づくことができます.
Javascriptでキーやメソッドにアクセスするときに順序があります.
例えば学生1.性別にアクセスするときは、この順序で行います.
1.オブジェクトにキー値(性別)が含まれていることを確認します.
2.そのキー値がない場合は、プロトタイプに性別があるかどうかを確認します.
3.メソッドがない場合は、親関数またはコンストラクション関数に性別プロトタイプがあることを確認します.
....
このようにして親にクエリーを続行し、対応するプロトタイプ値を実行します.
よく使うarrayをもう一度見てみましょう

      let array = [1, 2, 3, 4, 5];
      let array2 = new Array(1, 2, 3, 4, 5);

まずこの2つの方法は同じです.前者の方法で開発を行うと、JavaScript内部で後者が返されます.便宜上、多くの人が電子方式を使っていますが、後者が定式です.
Arrayのジェネレータを使用して配列を作成します.
通常、配列を作成するときに多くのことをします.配列値を追加するpush、ソートするsortなど、いろいろなことをします.しかしpushとsortメソッドは作成されていません.JavaScriptでは、push、sortなどの多くのプロトタイプがArrayジェネレータに内蔵されています.だから私たちは簡単に接近して使用することができます.
console.こうやって撮るとこの原型が発見されます

そのため、開発者がよく参考にするMDN公式サイトの上部には、このように記事のタイトルが表示されます.
ありがとうございます.
さらに、ES 6以降のバージョンでジェネレータを作成し、プロトタイプを作成して継承する新しい方法が導入されました.
class,constructor,extends,superを使用する方法.
コードを見てみましょう

コードの表示

      class 할아버지 {
        constructor(firstName, age) {
          (this.lastName = "신"), (this.firstName = firstName);
          this.age = age;
        }
        sayHi() {
          console.log(
            `제 이름은 ${this.lastName}${this.firstName} 이고 나이는 ${this.age}입니다`
          );
        }
      }

      class 아빠 extends 할아버지 {
        constructor(firstName, age) {
          super(firstName, age);
        }
      }

      class 아들 extends 아빠 {
        constructor(firstName, age) {
          super(firstName, age);
        }
      }

      let 할아버지1 = new 할아버지("그랜파", "81");
      let 아빠1 = new 아빠("파더", "55");
      let 아들1 = new 아들("썬", "28");
      
      //프로토타입 sayHi 출력
      console.log(할아버지1.sayHi());
      //제 이름은 신그랜파 이고 나이는 81입니다

      console.log(아빠1.sayHi());
      //제 이름은 신파더 이고 나이는 55입니다

      console.log(아들1.sayHi());
      //제 이름은 신썬 이고 나이는 28입니다
      

は、classを最初に宣言し、ジェネレータに名前を付けます.

必要な値をコンストラクション関数(パラメータ){}として挿入します.

コンストラクション関数の外にプロトタイプを作成できます.

を継承したい作成者をクラス作成者名として追加し、extendsに継承する作成者名を入力します.

ビットコンストラクション関数は、同じコンストラクション関数(パラメータ){}として作成され、

super(パラメータ)を追加します.ここで、superは親オブジェクトのデータ値を親オブジェクトに移動します.上記のコードには、(thi.lastName=「新規」)、(thi.firstName=firstName)が含まれます.
this.age = age; これが私たちにもサブジェネレータを加える方法です.

コンソールに希望する

の結果値が表示されますか?ロゴに写す

参考資料

https://poiemaweb.com/js-prototype