プロトタイプ

29809 ワード

テキストリンク

既存のブログの内容をDevelopgに移行した記事です.

1.オブジェクト向けプログラミング

≪オブジェクト｜Object｜oem_src≫:属性によって複数の値を1つのユニットに構成する複雑なデータ構造
「抽象」は、プログラムに必要な属性のみを要約するために使用されます.

2.継承とプロトタイプ

JavaScriptは、プロトタイプ継承オブジェクトによって重複作成を阻止します.

3.プロトタイプオブジェクト

__proto__ビジタープロパティ
すべてのオブジェクトが独自のプロトタイプ([[Prototype]]内部スロット)にアクセスできます.__proto__のビジタープログラムを持っています.
オブジェクトは、オブジェクトが直接所有するプロパティではありません.プロトタイプのproperty.__proto__訪問者propertyは継承によって使用される.

const animal = { type: "dog" };

// animal 객체는 __proto__ 프로퍼티를 소유하지 않는다.
console.log(animal.hasOwnProperty("__proto__")); // false

// __proto__ 프로퍼티는 모든 객체의 프로토타입 객체인 Object.prototype의 접근자 프로퍼티이다.
console.log(Object.getOwnPropertyDescriptor(Object.prototype, "__proto__"));
// {get: ƒ, set: ƒ, enumerable: false, configurable: true}

// 모든 객체는 Object.prototype의 접근자 프로퍼티 __proto__를 상속받아 사용할 수 있다.
console.log({}.__proto__ === Object.prototype); // true

関数オブジェクトのプロトタイプ構成
関数オブジェクトには、プロトタイププログラムも含まれます.

上図に示すように、prototypeおよび__proto__は、同じprototypeを指す.
ただし、コンフィギュレーション・タイプは関数オブジェクトが所有し、インスタンスを割り当てるコンフィギュレーション・タイプに使用され、__proto__はすべてのオブジェクトが独自のコンフィギュレーション・タイプにアクセスするために使用されます.

型のコンストラクション関数propertyとコンストラクション関数

すべてのプロトコルタイプには、コンストラクション関数プロトコルがあります.
このコンストラクション関数propertyは、そのコンストラクション関数を参照するプロトタイプpropertyです.

4.文字記号から生成されるオブジェクトのコンストラクション関数とプロトタイプ

文字記号で生成されるオブジェクトは、コンストラクション関数で生成されるオブジェクトではありません.
オブジェクトテキストで作成されたオブジェクトと、オブジェクト作成者関数で作成されたオブジェクトは、作成中に違いがありますが、最終的にはオブジェクトとして同じ特性を有します.
テキストシンボルジェネレータ関数プロトタイプオブジェクトテキストオブジェクト.proptype関数文字機能.プロトタイプアレイ自然アレイ.Prototype正規表現、文字RegExpRegExp.protptype

5.プロトタイプ作成時間

ユーザー定義のコンストラクション関数とプロトタイプを作成するタイミング
関数定義を計算して関数オブジェクトを生成すると、プロトタイプも生成されます.

// 함수 정의(constructor)가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성된다.
console.log(animal.prototype); // {constructor: ƒ}

// 생성자 함수
function animal(type) {
  this.type = type;
}

コンストラクタ関数とプロトタイプ作成ポイント
すべてのコンストラクタ関数は、グローバルオブジェクトの作成時に作成されます.

6.プロトタイプチェーン

__proto__によってpropertyを検索することをprototypeチェーンと呼ぶ.

7.カプセル化

カプセル化とは,情報の一部を外部に隠すことである.

const Animal = (function () {
  let _cry = ""; // private한 변수

  // 생성자 함수
  function Animal(cry) {
    _cry = cry;
  }

  // 프로토타입 메소드 (상속됨)
  Animal.prototype.cry = function () {
    console.log(`Animal cry : ${_cry}`);
  };

  // 생성자 함수를 반환
  return Animal;
})();

const dog = new Animal("bow");

dog.cry = "meow"; // _type은 지역변수로 캡슐화 돼있기 때문에 변경되지 않는다.
dog.cry(); // Animal cry : bow

8.誇張とプロの造形

const Animal = (function () {
  let _cry = ""; // private한 변수

  // 생성자 함수
  function Animal(cry) {
    _cry = cry;
  }

  // 프로토타입 메소드 (상속됨)
  Animal.prototype.cry = function () {
    console.log(`Animal cry : ${_cry}`);
  };

  // 생성자 함수를 반환
  return Animal;
})();

const dog = new Animal("bow");

dog.cry = function () {
  console.log(`Dog cry : ${_cry}`);
};

dog.cry(); // Dog cry : bow   <- 인스턴스 메소드가 호출됨

インスタンスメソッドcryはprototypeメソッドcryを上書きします.

9.プロトタイプの交換

コンストラクション関数による置換

const Person = (function () {
  function Person(name) {
    this.name = name;
  }

  // ① 생성자 함수의 prototype 프로퍼티를 통해 프로토타입을 교체
  Person.prototype = {
    sayHello() {
      console.log(`Hi! My name is ${this.name}`);
    },
  };

  return Person;
})();

const me = new Person("Lee");

上図に示すように,オブジェクト文字がプロトタイプに入っているため,関数プログラムを構築していない.
プロトタイプを置き換えると、コンストラクション関数プロトタイプとコンストラクション関数関数関数関数の間のリンクが破壊されます.
接続するには、次のように明示的に接続する必要があります.

Person.prototype = {
  // constructor 프로퍼티와 생성자 함수 간의 링크 설정
  constructor: Person,
  sayHello() {
    console.log(`Hi! My name is ${this.name}`);
  },
};

インスタンスによる置換

function Person(name) {
  this.name = name;
}

const me = new Person("Lee");

// 프로토타입으로 교체할 객체
const parent = {
  sayHello() {
    console.log(`Hi! My name is ${this.name}`);
  },
};

// me 객체의 프로토타입을 parent 객체로 교체한다.
Object.setPrototypeOf(me, parent);
// 위 코드는 아래의 코드와 동일하게 동작한다.
// me.__proto__ = parent;

me.sayHello(); // Hi! My name is Lee

コンストラクション関数プロファイルとコンストラクション関数のリンクが破壊されます.
コンストラクション関数のプロトタイププログラムへの接続も切断されます.
機能を再開するには、次のように記述します.

// 프로토타입으로 교체할 객체
const parent = {
  // constructor 프로퍼티와 생성자 함수 간의 링크 설정
  constructor: Person,
  sayHello() {
    console.log(`Hi! My name is ${this.name}`);
  },
};

// 생성자 함수의 prototype 프로퍼티와 프로토타입 간의 링크 설정
Person.prototype = parent;

10.instanceof演算子

객체 instanceof 생성자함수;

左側のオブジェクトが右側のコンストラクション関数に関連付けられたインスタンスである場合、trueまたはfalseとして計算されます.
この評価は相続官の彼女を考慮した.
右側のコンストラクション関数のプロトタイプが左側のオブジェクトプロトタイプチェーンに存在するかどうかを決定します.

11.直接継承

Object.createによる直接継承

// Object.create(프로토타입, 프로퍼티로 가질 객체);

obj = Object.create(Object.prototype, {
  x: { value: 1 },
}); // obj = Object.create(Object.prototype);와 같다

1番目のパラメータはプロトタイプを渡し、2番目のパラメータはプロトタイプとして使用するオブジェクトを渡します.

オブジェクト文字の内部から直接継承__proto__

const myProto = { x: 10 };

const obj = {
  y: 20,
  __proto__: myProto,
}; // // const obj = Object.create(myProto, { y: { value: 20 } });

12.静的プロセス/方法

インスタンスを作成する必要がなく、参照または呼び出すことができるProperty/メソッドを示します.

function Animal(cry) {
  this.cry = cry;
}

Animal.staticProp = "static prop";
Person.staticMethod = function () {
  console.log("staticMethod");
};

Person.staticMethod();

13.propertyの存在を確認する

key in object;

const puppy = {
  type: "dog",
  age: 5,
};

console.log("type" in puppy); // true
console.log(puppy.hasOwnProperty("age")); // true

なお、in演算子は、継承されたすべてのプロトコルタイプのプロトコルをチェックします.
したがって、hasOwnPropertyを使用すると、オブジェクトのプロパティのみが表示されます.

14.番組を挙げる

for...文.
for...ここで、オブジェクトのプロトタイプチェーン上に存在するすべてのプロトタイプのプロトタイプにおいて、プロトタイプツリー[[Enumerable]]の値が真のプロトタイプであることが巡回してリストされる.
したがって、オブジェクト自体のpropertyのみをリストするには、Object.prototype.hasOwnPropertyメソッドを使用して、オブジェクト自体のpropertyであるかどうかを決定する必要があります.

Object.keys/values/entriesメソッドObject.keysメソッドは、オブジェクト自体のカラム可能なPropertyキーを配列に戻します.Object.valuesメソッドは、オブジェクト自体のリスト可能なプロパティ値を配列に返します.(ES8)Object.entriesメソッドは、オブジェクト自体のリスト可能なPropertyキーと値ペアの配列を配列に入れて返します.(ES8)

const puppy = {
  type: "dog",
  age: 5,
  __proto__: { age: 20 },
};
console.log(Object.keys(puppy)); // ["type", "age"]
console.log(Object.values(puppy)); // ["dog", "5"]
console.log(Object.entries(puppy)); // [["type", "dog"], ["age", 5]]

参考資料:poiemaweb。com

Reference

この問題について(プロトタイプ), 我々は、より多くの情報をここで見つけました https://velog.io/@seongkyun/프로토타입

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

Openwrt:mtd/mtd_write書き込みファームウェア

SSH非密登録(超詳細)