JavaScript がオブジェクトを作成するさまざまな方法とその長所と短所についての深い理解

この記事では、JavaScriptオブジェクトの作成のさまざまな方法と利点と欠点を主に紹介します 興味がある場合は、詳細を学ぶことができます

この記事の前に書いてください。オブジェクトを作成するさまざまな方法を長所と短所とともに説明します。

ただし、注意:

「JavaScript 高度なプログラミング」は非常によく書かれているため、この記事はメモのようなものです。

1.

ファクトリパターン

function createPerson(name) {
  var o = new Object();
  o.name = name;
  o.getName = function () {
    console.log(this.name);
  };

  return o;
}

var person1 = createPerson('kevin');

欠点: すべてのインスタンスがプロトタイプを指すため、オブジェクトを識別できません

2.

コンストラクター

パターン

function Person(name) {
  this.name = name;
  this.getName = function () {
    console.log(this.name);
  };
}

var person1 = new Person('kevin');

利点: インスタンスは特定のタイプとして識別できます。

短所: インスタンスが作成されるたびに、各メソッドを一度作成する必要があります

2.1 コンストラクターパターンの最適化

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

function getName() {
  console.log(this.name);
}

var person1 = new Person('kevin');

長所: 各メソッドを再作成する必要がある問題を解決します

短所: これ カプセル化とは何ですか? .

3.

プロトタイプモード

function Person(name) {

}

Person.prototype.name = 'keivn';
Person.prototype.getName = function () {
  console.log(this.name);
};

var person1 = new Person();

利点: メソッドは再作成されません

欠点: 1. すべての

プロパティとメソッド

が共有されます2. パラメーターを初期化できません

3.1 プロトタイプパターンの最適化

りー 利点: より良いカプセル化

欠点: プロトタイプを書き直してコンストラクター属性を失う

3.2 プロトタイプモードの最適化

function Person(name) {

}

Person.prototype = {
  name: 'kevin',
  getName: function () {
    console.log(this.name);
  }
};

var person1 = new Person();

利点: インスタンスはコンストラクター属性を通じてコン​​ストラクターを見つけることができます

欠点: まだいくつかの欠点がありますプロトタイプパターン

4.

結合パターン

コンストラクターパターンとプロトタイプパターンは、2つの剣を組み合わせたものです。

function Person(name) {

}

Person.prototype = {
  constructor: Person,
  name: 'kevin',
  getName: function () {
    console.log(this.name);
  }
};

var person1 = new Person();

長所: 共有共有、非公開、最も広く使用されている方法

短所: すべてをまとめて書きたい人もいます。つまり、より良いカプセル化

4.1 ダイナミックプロトタイプモード

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

Person.prototype = {
  constructor: Person,
  getName: function () {
    console.log(this.name);
  }
};

var person1 = new Person();

注:動的プロトタイプ モードでは、プロトタイプをオブジェクト リテラルでオーバーライドできません

理由を説明します:

function Person(name) {
  this.name = name;
  if (typeof this.getName != "function") {
    Person.prototype.getName = function () {
      console.log(this.name);
    }
  }
}

var person1 = new Person();

この問題を説明するために、var person1 = new Person('kevin') が開始されたと仮定します。

new と apply の基本的な実行プロセスにあまり詳しくない場合は、下部にある関連リンクの記事を読むことができます。

new の実装手順を確認してみましょう:

まず新しいオブジェクトを作成します

1. 次に、オブジェクトのプロトタイプを Person.prototype にポイントします

2. 次に、 Person.apply(obj)

3. がこのオブジェクトを返します

4. この時点で、apply の実装手順を確認してください。obj.person メソッドが実行され、この時点で if ステートメントの内容が実行されることに注意してください。コンストラクターのプロトタイプ属性は、 person.prototype は、インスタンスのプロトタイプを直接オーバーライドするためにリテラル メソッドを使用します。person1 は、依然として Person.prototype ではなく、前のプロトタイプを指します。以前のプロトタイプには getName メソッドがなかったため、エラーが報告されました。

文字通りの方法でコードを書きたいだけの場合は、これを試すことができます:

function Person(name) {
  this.name = name;
  if (typeof this.getName != "function") {
    Person.prototype = {
      constructor: Person,
      getName: function () {
        console.log(this.name);
      }
    }
  }
}
 
var person1 = new Person('kevin');
var person2 = new Person('daisy');
 
// 报错 并没有该方法
person1.getName();
 
// 注释掉上面的代码，这句是可以执行的。
person2.getName();

5.1 寄生コンストラクター パターン

function Person(name) {
  this.name = name;
  if (typeof this.getName != "function") {
    Person.prototype = {
      constructor: Person,
      getName: function () {
        console.log(this.name);
      }
    }
 
    return new Person(name);
  }
}
 
var person1 = new Person('kevin');
var person2 = new Person('daisy');
 
person1.getName(); // kevin
person2.getName(); // daisy

寄生コンストラクター パターンは、個人的には次のように読むべきだと思います。これ:

Parasite-constructor-pattern、つまり、コンストラクターに寄生するメソッド。

つまり、コンストラクターを装って、他人の頭の上で羊のようなものを売ろうとしているのです。instanceof を使用して作成されたインスタンスはコンストラクターを指すことができません。

この方法は特別な状況で使用できます。たとえば、追加のメソッドを使用して特別な

array

を作成したいが、

Array

コンストラクターを直接変更したくない場合は、次のように記述できます:

function Person(name) {
 
  var o = new Object();
  o.name = name;
  o.getName = function () {
    console.log(this.name);
  };
 
  return o;
 
}
 
var person1 = new Person('kevin');
console.log(person1 instanceof Person) // false
console.log(person1 instanceof Object) // true

寄生コンストラクタ パターンと呼ばれるパターンは、実際にはファクトリよりも優れています。このパターンは、オブジェクトの作成時にもう 1 つ新しいものを使用します。実際、2 つの結果は同じです。

しかし、作成者は SpecialArray を通常の Array と同じように使用したいと考えているかもしれませんが、SpecialArray は関数として使用できますが、これは作成者の意図ではなく、洗練されていません。

他のモードが使用できる場合は、このモードを使用しないでください。

しかし、上記の例の

loop

は次のように置き換えることができることに注意してください:

function SpecialArray() {
  var values = new Array();
 
  for (var i = 0, len = arguments.length; i len; i++) {
    values.push(arguments[i]);
  }
 
  values.toPipedString = function () {
    return this.join("|");
  };
  return values;
}
 
var colors = new SpecialArray('red', 'blue', 'green');
var colors2 = SpecialArray('red2', 'blue2', 'green2');
 
 
console.log(colors);
console.log(colors.toPipedString()); // red|blue|green
 
console.log(colors2);
console.log(colors2.toPipedString()); // red2|blue2|green2

5.2 いわゆる安定したコンストラクター パターン

rrリー
オブジェクト、これはパブリック プロパティを持たないオブジェクトを参照しており、そのメソッドはこれを

参照

しません。

寄生コンストラクター パターンとは 2 つの違いがあります:

1. 新しく作成されたインスタンス メソッドは this を参照しません

2. コンストラクターを呼び出すために新しい operator を使用しません

安全なオブジェクトは以下に最適ですある程度の安全環境。

安全なコンストラクター パターンもファクトリ パターンと同じであり、オブジェクトの型を識別できません。

以上がJavaScript がオブジェクトを作成するさまざまな方法とその長所と短所についての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。