コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript がオブジェクトを作成するさまざまな方法とその長所と短所についての深い理解

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

黄舟
リリース： 2017-06-04 10:38:37
オリジナル
1294 人が閲覧しました

この記事では、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 メソッドがなかったため、エラーが報告されました。

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

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 サイトの他の関連記事を参照してください。

関連ラベル：
JavaScript，创建对象，优缺点
ソース：php.cn
前の記事：JavaScript でプロンプト ボックスの遅延表示効果を実装する方法のコード例 次の記事：JavaScript がインライン スタイルと埋め込みスタイルを取得する方法を示すコード例の共有
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2060
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2215
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1870
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1753
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1779
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート