ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript のオブジェクトとプロトタイプ (1)

JavaScript のオブジェクトとプロトタイプ (1)

黄舟
リリース: 2016-12-23 15:25:33
オリジナル
1076 人が閲覧しました

One Factory Pattern

オブジェクトを作成するには、次のコードを使用できることがわかります:

var user = new Object(); //使用new运算符创建一个对象
user.name = '念在三角湖畔'; //给对象添加属性
user.age = 22;
user.address = '湖北武汉';
alert(user.name + " " +user.age);//返回 '念在三角湖畔 湖北武汉'
ログイン後にコピー

この方法でオブジェクトを作成するのは比較的シンプルで直感的であり、JavaScript でオブジェクトを作成する最も基本的な方法でもあります。しかし、複数のオブジェクトを作成する必要がある場合、多くのコードを繰り返し記述しなければならないという問題があります。たとえば、別のオブジェクト user1 を作成する場合、上記のコードを書き直す必要があります。これは、オブジェクトが多すぎるとコード量が大幅に増加するため、実際の開発プロセスでは適切ではありません。

このような問題を解決するには、ファクトリパターンと呼ばれる方法を使用できます。この方法は、重複コードが大量に生成されるオブジェクトのインスタンス化の問題を解決します。

function create(name, age) {
  var obj = new Object(); 
  obj.name = name; 
  obj.age = age;
  obj.run = function () {
    return this.name +' '+ this.age;
  };
  return obj;
}
var obj1= create('ZXC', 10); //第一个实例
var obj2= create('CXZ', 20); //第二个实例
alert(obj1.run());
alert(obj1.run());
ログイン後にコピー

上記のコードから、ファクトリ パターンがインスタンス化中の大量のコード重複の問題を解決していることがわかりますが、別の問題が発生します。つまり、どのオブジェクトがインスタンスであるかを単純に把握できないということです。の。例:

alert(typeof obj1); //Object
alert(obj1 instanceof Object); //true
ログイン後にコピー

上記のコードは、box1 が Object オブジェクトであることを示していますが、どのオブジェクトが作成されたのかはわかりません。

2 コンストラクター(コンストラクターメソッド)

上記の問題を解決するには、コンストラクターメソッドを使用してオブジェクトを作成できます。コンストラクターと通常の関数の唯一の違いは、その呼び出し方法です。ただし、コンストラクターも関数です。

function User(name, age) { //构造函数模式
  this.name = name;
  this.age = age;
  this.run = function () {
    return this.name + ' '+this.age;   };
}
ログイン後にコピー

オブジェクトを作成するときに new 演算子を使用するだけです:

var user1= new User('ZXC', 25);
var user2= new User('CXZ', 22);
ログイン後にコピー

これで、user1 または user2 が User に属しているかどうかを検出できるようになりました。

alert(user1 instanceof User);//true 
ログイン後にコピー

コンストラクターメソッドを使用すると、インスタンス化の繰り返しの問題が解決されるだけでなく、オブジェクト認識の問題も解決されることがわかります。

コンストラクタを使用する際に実行される処理は次のとおりです:

1. newコンストラクタ()を実行すると、バックグラウンドでnew Object()が実行されます

2.コンストラクタのスコープをnewコンストラクタに与える物体。

3. コンストラクターでコードを実行します。

4. 新しいオブジェクトをバックグラウンドで直接返します。

次に、コンストラクター内の関数の問題を見てみましょう。次のステートメントを実行すると:

alert(user1.run==user2.run);//结果返回的是false
ログイン後にコピー

結果は false を返します。これは、メソッドが実際には参照アドレスであることを意味します。複数のオブジェクトを繰り返し作成すると、各オブジェクトのメソッドによってメモリ内に新しい領域が空き、より多くの領域が無駄になります。この問題を解決するには、インスタンスの属性またはメソッドの共有を使用する必要があります。この問題の解決については、次の記事で引き続き説明します。

上記は JavaScript のオブジェクトとプロトタイプの内容です (1)。さらに関連する内容については、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート