[JS/node] prototype

28996 ワード
テキストリンク

prototype


円形オブジェクト

メモ

  • プロトコルタイプは、オブジェクト向けの実装に使用することができる.
  • クラスのメソッド情報が含まれます.

    • Achievement Goals


    Javascriptオブジェクトのプロトタイプについて、プロトタイプチェーンがどのように動作するか、また、プロトタイププロパティに新しいメソッドを追加する方法も学習します.

    プロトタイプベースの言語、JavaScript


    すべてのオブジェクトには、継承メソッドと属性のテンプレートとしてプロトタイプオブジェクト(prototype object)があります.

    prototype chain


    JavaScriptで상속を実施する場合に使用
    プロトタイプオブジェクトは、親オブジェクトからメソッドとプロパティを継承することもできます.親オブジェクトはメソッドとプロパティを継承することもできます.
    特定のオブジェクトで他のオブジェクトで定義されたメソッドとプロパティを使用できるルートディレクトリ.
    継承された属性とメソッド(各オブジェクトではなく)は、属性でオブジェクト作成者のプロトタイプとして定義されます.

    __proto__


    [dunder proto]
    特定のオブジェクトにアクセスできるプロトタイプオブジェクトのプロパティ.
    (JavaScript自体の動作原理、プロトタイプフィルタによる__proto__参照)

    プロトタイプオブジェクト(個々のオブジェクトのプロパティ)


    すべてのオブジェクトが持つメソッドとプロパティを継承するテンプレート.__proto__プロパティからアクセス可能な組み込みオブジェクト

    prototypeプロパティ(作成者のプロパティ)


    継承メンバー(属性、メソッド)の属性は、定義されたオブジェクトの作成者で定義されます.
    主にパケットとして使用されるオブジェクトで、プロトタイプチェーンで継承するプロパティとメソッドが含まれます.

    例

    Object. (x)Object.prototype. (o)

    個々のオブジェクトのプロパティ


    ジェネレータのプロパティ


    オリジナル作成者関数自体

    プロトタイプチェーン運動証拠



    Person()で定義されたPerson()のプロトタイプオブジェクトのメンバー.
    -name、age、性別、趣味、bio、greeting.
    また、Person()などのオブジェクト(監視や値など)で定義された他のメンバーのプロトタイプオブジェクトも表示されます.これはプロトタイプ鎖が機能することを示している.

    person1.valueOf()

  • ブラウザは、person 1オブジェクトにvalueOf()メソッドがあるかどうかを最初にチェックします.
  • がないので、person 1の「プロトタイプ」オブジェクト(Person()作成者のプロトタイプ)にvalueOf()メソッドがあるかどうかをチェックします.
  • はまだ存在しないので、Person()作成者のプロトタイプオブジェクト(オブジェクト()作成者のプロトタイプ)にvalueOf()メソッドがあるかどうかをチェックします.
  • ここで、コール終了!

    • クラスHumanとインスタンスとプロトタイプの関係



    「図」クラスHumanとインスタンス、およびプロトタイプの関係図.

    Arrayクラスとインスタンスとプロトタイプの関係



    [図]アレイarrとArray、プロトタイプの関係図

    extendsキーワード


    クラス宣言またはクラス式に使用してクラスを他のクラスのサブクラスにする

    スーパー演算子


    親クラスの作成者を呼び出し、super()のパラメータを使用して親クラスメンバーのコードを継承します.

    必読文献


    プロトタイプドキュメント

    Reference Code

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Object-oriented JavaScript class further exercises</title>
  </head>

  <body>
    <p>This example requires you to enter commands in your browser's JavaScript console (see <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools</a> for more information).</p>

  </body>

    <script>
      function Person(first, last, age, gender, interests) {
        this.name = {
          'first': first,
          'last' : last
        };
        this.age = age;
        this.gender = gender;
        this.interests = interests;
        this.bio = function() {
          // First define a string, and make it equal to the part of
          // the bio that we know will always be the same.
          var string = this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. ';
          // define a variable that will contain the pronoun part of
          // the second sentence
          var pronoun;

          // check what the value of gender is, and set pronoun
          // to an appropriate value in each case
          if(this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {
            pronoun = 'He likes ';
          } else if(this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {
            pronoun = 'She likes ';
          } else {
            pronoun = 'They like ';
          }

          // add the pronoun string on to the end of the main string
          string += pronoun;

          // use another conditional to structure the last part of the
          // second sentence depending on whether the number of interests
          // is 1, 2, or 3
          if(this.interests.length === 1) {
            string += this.interests[0] + '.';
          } else if(this.interests.length === 2) {
            string += this.interests[0] + ' and ' + this.interests[1] + '.';
          } else {
            // if there are more than 2 interests, we loop through them
            // all, adding each one to the main string followed by a comma,
            // except for the last one, which needs an and & a full stop
            for(var i = 0; i < this.interests.length; i++) {
              if(i === this.interests.length - 1) {
                string += 'and ' + this.interests[i] + '.';
              } else {
                string += this.interests[i] + ', ';
              }
            }
          }

          // finally, with the string built, we alert() it
          alert(string);
        };
        this.greeting = function() {
          alert('Hi! I\'m ' + this.name.first + '.');
        };
      };

      let person1 = new Person('Tammi', 'Smith', 32, 'neutral', ['music', 'skiing', 'kickboxing']);
    </script>
</html>

    なぜオブジェクトに向かうのですか?


    機械的な考え方が難しいからです.
    人の考え方に似ているようにするために必要になりました.
    // Case 1. 컴퓨터에게 편한 방식
// assembly === 절차 지향적 언어
메모리 0 - 카운터 할당 = 0
메모리 1 - 카운터 증가
메모리 2 - 출력 'hongsik'
메모리 3 - 카운터와 원하는 반복 횟수 비교
메모리 4 - 카운터 === 원하는 반복 횟수 false? 메모리 1

// 메모리 0 ~ 3을 for문을 통해 반복한다.

// Case 2. 은행 송금 기능
메모리 0 - 송금 주소 할당 = 0000000000
메모리 1 - 전달 받은 주소의 정보를 조회
메모리 2 - 16글자가 넘어서.. 그 다음 메모리 조회
메모리 3 - 16글자가 넘어서.. 그 다음 메모리 조회
...
메모리 10 - 전달 받은 주소 정보 조회 끝!
메모리 11 - 전달 받은 주소로 송금하기 메모리 1259124 조회
하드디스크 1 - ? 아니네
하드디스크 2 - ? 아니네

// Case 3 객체 지향 프로그래밍
// => 컴퓨터 왜 쓰나요? 게임 ,일, => 편할려고, 좀 더 쉽게 
// => 개발 => 상업적 가치
// => 효율적으로 해야 한다. 사람이 쓸 수 있게 개발해야 한다.
// 기계적 사고방식이 너무 어려웠기 때문에
// 사람이 사고하는 방식과 비슷하게 만들기 위해서 필요해졌다.
class 은행계좌 {
   constructor(){

   }

  은행계좌주소: string
  송금 : () => {
    송금에 필요한 코드
  }
  입금 : () => {
    입금에 필요한 코드
  }
}

    標準


    A-宣言
    R-根拠
    E例

    Relations of class constructor, prototype, instance


    お互いに参照する方法を絵に描いてみましょう。


    参照


    メモリアドレス値

    関係



    1番コード


    クラスHumamを作成します.
    ここで、属性(name、age)およびメソッド(sleep())が定義される.

    2番コード


    new演算子を使用してインスタンスを作成します.new Human('kimcoding, 30)Humanの名前は「kimcoding」年齢は30歳
    2番コードを作成しながら(new Human('kimcoding', 30)、__proto__を自動的に生成します.

    Human.prototype


    new演算子を使用してインスタンスを呼び出します(kimcoding).속성および메소드を渡すことができるオブジェクト
    class内部にはconstructor内部の속성と底部の메소드と書かれていますが、Human.prototype内部と考えられます.

    constructor


    一連のコードは、属性を인스턴스に転送する.

    方法

    인스턴스にメソッド関連情報はありません.
    したがって、__proto__は、prototype chainingを介してこの方法にアクセスすることができる메소드 관련 정보

    __proto__ ( kimcoding.__proto__ )


    dunder proto
    new演算子を使用してインスタンス(kidmcoding)を呼び出すと自動的に生成される「オブジェクト」
    参照オブジェクト(kimcoding.__proto__)は、prototype chainingを通過する
    方法sleepを探すために、Human.prototypeを参照してください.
    したがって、인스턴스はメソッド関連情報を含まないが、메소드 sleep()を呼び出すことができる.

    Human.prototype === kimcoding.proto;


    意味kimcodingは、__proto__オブジェクトを介してHuman.prototypeを参照する.
    結果
    したがって、このコードはtrueである.

    Human.prototype.sleep === kimcoding.sleep;


    意味kimcodingの例には方法がない(sleep()).__proto__オブジェクトを経て、このアドレスはHuman.prototypeに達する.
    これらのprototype.chainingによってHuman.prototype.sleepが参照される.
    結果
    したがって、このコードはtrueである.

    Human.prototype.constructor === Human;


    意味
    クラス(Human)にはprototype(Human.prototype)というオブジェクトが接続されています.
    オブジェクト内にconstructorというプロパティ(アドレス)が作成されます.
    このアドレス(Human.prototype.constructor)は、Humanを指す(参照).
    ロール＃ロール＃
    Humannewを呼び出すと、インスタンスオブジェクトに属性を渡す役割を果たします.
    結果
    コンストラクション関数のプロパティはHumanと同じです.
    したがって、このコードはtrueである.

    Human.constructor


    結果
    したがって、このコードは{[native code]}です.
    native code
    そんなことないと思えばいい

    概要**


    クラスがインスタンスを呼び出すとき、クラス.プロパティをプロトタイプで渡します.
    new演算子を使用する必要があります.
    呼び出されたインスタンスにはメソッド情報は含まれません.
    インスタンスが呼び出されたときに自動的に生成される__proto__"クラス.「prototype」呼び出し方法を参照できます.このとき、「クラス」.プロトタイプ「はい」クラス.prototype.クラスはconstructorで参照されます.

    コード#コード#

    // 1번 코드
class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sleep() {
    console.log(`${this.name}은 잠에 들었습니다`);
  }
}

// 2번 코드
let kimcoding = new Human('김코딩', 30);

// 실습해보세요

// 실습1
Human.prototype.constructor === Human; // 결과는 무엇일까요? true
// 실습2
Human.prototype === kimcoding.__proto__; // 결과는 무엇일까요? true
// 실습3
Human.prototype.sleep === kimcoding.sleep; // 결과는 무엇일까요? true
    ASCIIコード、hexコード、String文字列の相互変換と原理
    マトリクス画像データ処理と変換