blog

JSはいくつかの方法でオブジェクトを生成する

新しいオブジェクト;\nファクトリーパターン\nコンストラクタ・パターン\nプロトタイプ・パターン\nコンストラクタ・パターンとプロトタイプ・パターンの組み合わせ\n動的プロトタイプ・パターン\nne...

Aug 13, 2020 · 3 min. read
シェア
  • new Object();
  • {}
  • Object.create();
  • 工場モデル
  • コンストラクタ・モデル
  • 試作モデル
  • コンストラクタとプロトタイプの組み合わせパターン
  • ダイナミック・プロトタイプ・パターン

new Object() {}

  1. オブジェクトとして __proto__ を持つオブジェクトを作成します;

Object.create()

  1. パラメータが NULL または何もない場合、空のオブジェクトが作成され、暗黙のプロトタイプは存在せず、toString メソッドの呼び出しもエラーを報告します;
  2. 引数はプロトタイプ・オブジェクトで、 __proto___ がこのプロトタイプを指していることを示します;

工場モデル

function Person() {
 var o = new Object();
 o.name = 'hanmeimei';
 o.say = function() {
 alert(this.name);
 }
 return o;
}
var person1 = Person();

長所:オブジェクトに対するリクエストを作成

短所

  1. コンストラクタでオブジェクトを識別できません。オブジェクトはすべてObjectから来たものだと思っていたのですが、Personから来たものかどうかはわかりません;
  2. Personを使ってオブジェクトを作成するたびに、すべてのメソッドは同じですが、何度も保存されるため、コンピュータのリソースを浪費します;

コンストラクタ・モデル

function Person() {
 this.name = 'hanmeimei';
 this.say = function() {
 alert(this.name)
 }
}
var person1 = new Person();

長所

  1. オブジェクトのインスタンスのクラスは、コンストラクタまたは instanceof
  2. オブジェクト・インスタンスは new キーワードで作成できます;

短所

  1. 複数のインスタンスを作成する方法は変わりませんが、複数のオブジェクトを作成する際に何度も保存することでコンピュータのリソースを浪費してしまうという問題は未解決のままです;

試作モデル

function Person() {}
Person.prototype.name = 'hanmeimei';
Person.prototype.say = function() {
 alert(this.name);
}
Person.prototype.friends = ['lilei'];
var person1 = new Person();

長所

  1. 共有のためのメソッドが実装されています;
  2. プロトタイプ・オブジェクトにメソッドやプロパティを動的に追加することができます。

短所

  1. 参照型の場合、すべてのオブジェクト・インスタンスは同じアドレスを指し、その参照型のペアを変更すると、他のインスタンスも変更されます;

コンストラクタとプロトタイプの組み合わせパターン

function Person(name) {
 this.name = name
 this.friends = ['lilei']
}
Person.prototype.say = function() {
 console.log(this.name)
}
var person1 = new Person('hanmeimei')
person1.say() //hanmeimei

長所

  1. 参照型に対するプロトタイプ・パターンの欠点に対処;
  2. prototypeパターンにはパラメータを渡す手段がないという欠点を解決します;
  3. コンストラクタ・パターンがメソッドを共有できないという欠点に対処します;

短所:自由に追加してください;

ダイナミック・プロトタイプ・パターン

function Person(name) {
 this.name = name
 if(typeof this.say != 'function') {
 Person.prototype.say = function(
 alert(this.name)
 }
}

長所

  1. 共有メソッドをコンストラクタにカプセル化します;
  2. コンストラクターを最初に呼び出した時点で、プロトタイプ・オブジェクトの変更を完了させることが可能です;
Read next

Vueに関するいくつかの質問

もしVueが非同期レンダリングに対応していなかったらと想像してみると、データに対する複数の更新を一度にレンダリングしなければならず、パフォーマンスが低下します。パフォーマンスを考慮し、Vue は非同期レンダリングアプローチを採用しています。ちなみに、非同期レンダリングであるため、データを更新した後、nextTick を使用する必要がある場合は、すぐに dom 上の最新の値を取得することはできません。

Aug 13, 2020 · 12 min read