ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript オブジェクトとは何ですか?オブジェクトコードの作り方を詳しく解説

JavaScript オブジェクトとは何ですか?オブジェクトコードの作り方を詳しく解説

伊谢尔伦
伊谢尔伦オリジナル
2017-07-24 15:36:361351ブラウズ

オブジェクトとは何ですか? JavaScript の定義から、オブジェクトは順序付けされていないプロパティのコレクションであり、そのプロパティには基本的な値、オブジェクト、または関数を含めることができます。つまり、オブジェクトは、特定の順序ではない属性のセットであり、値はデータまたはオブジェクトのセットである値にマップされます。

最も単純なオブジェクト

JavaScript の中括弧 {} のペアでオブジェクトを定義できます。この記述方法は、実際には Object のコンストラクターを呼び出すのと同じです

var obj={};
var obj2=new Object();

この方法で構築されたオブジェクトには、プロトタイプへのポインターのみが含まれます。 Object の場合は、 valueOf 、 hasQwnProperty 、およびその他のメソッドを使用できますが、実際的な効果はほとんどありません。カスタム オブジェクトには常にいくつかのカスタム属性とメソッドがあります。

var obj={};
            obj.a=0;
            obj.fn=function(){
                alert(this);
            }
            var obj2={
                a:0,
                fn:function(){
                    alert(this);
                }
            }

オブジェクトを定義した後に「.」を使用してプロパティとメソッドを追加することも、オブジェクトを定義するときにリテラル割り当てメソッドを使用してプロパティとメソッドを追加することもできます。クラスの静的変数や静的関数と同様に、オブジェクト参照を使用してオブジェクトを作成する場合には、明らかな欠陥があります。多数のオブジェクトを定義するのは非常に手間がかかり、ほとんど繰り返しのコードを何度も書かなければなりません。また。

今度は関数が登場します。JavaScript では関数はオブジェクトです。オブジェクトを作成するときに、関数を直接オブジェクトとして使用できます。これは関数の特殊性です。オブジェクトとして。

1. 関数はパラメーターを受け入れることができ、パラメーターに基づいて同じタイプの異なる値のオブジェクトを作成できます

2. 関数がコンストラクターとして使用される場合 (new 演算子を介して呼び出される)、戻り値が返されます。 jQuery の貧しい中流階級のバージョンで言及されているように、オブジェクト コンストラクターの基本的な知識があれば、それをコピーするだけです

コンストラクターの戻り値は、関数が return ステートメントを持たない場合と基本的な関数を返す場合の 2 つの状況に分けられます。型 (bool、int、string、unknown、null) の場合は返されます。 new によって作成された匿名オブジェクトは関数インスタンスです。参照型オブジェクト (Array、Function、Object など) が関数本体で返された場合、そのオブジェクトが返されます。 new によって作成された匿名オブジェクトが戻り値として上書きされます。

3. では、関数を使用して型識別の問題を解決するにはどうすればよいでしょうか? 各関数インスタンス オブジェクトにはコンストラクター属性があります (「ある」ではなく、対応することができます)。 instanceof 演算子は、オブジェクトが XXX のインスタンスであるかどうかを判断するために使用されます。

コードは次のとおりです:

function Person(name){
                this.name=name;
                this.fn=function(){
                    alert(this.name);
                }
            }
            var person1=new Person('Byron');
            console.log(person1.constructor==Person);//true
            console.log(person1 instanceof Person); //true
これは完璧です、いいえ!コンストラクターはオブジェクト固有にすることができますが、メソッドはオブジェクトのすべてのインスタンスで繰り返す必要があります。
function Person(name){
                this.name=name;
                this.fn=function(){
                    alert(this.name);
                }
            }
            var person1=new Person('Byron');
            var person2=new Person('Frank');
            console.log(person1.fn==person2.fn);//false

ほら、2 つのインスタンスの fn はまったく同じですが、それらは同じものではありません。関数オブジェクトに 1000 のメソッドがある場合、そのインスタンスのそれぞれにこれらのメソッドのコピーが含まれている必要があり、これは非常に面倒です。思い出は言葉にならない。

繰り返しの作業を必要とせず、スタイリッシュで、オブジェクトの一般的なメソッドを繰り返す必要がない、オブジェクトを構築するほぼ完璧な方法はありますか?実際、関数の使用はすでに要件に近いことがわかります。唯一の違いは、関数オブジェクトのすべてのインスタンスで共有されるコンテナーが必要であるということです。このコンテナーでは、インスタンスは属性とメソッドを共有する必要があります。たまたま、このコンテナは準備ができています - プロトタイプ、プロトタイプを知らない学生は、JavaScript プロトタイプを見てみることができます

function Person(name){
                this.name=name;
            }
            Person.prototype.share=[];
            Person.prototype.printName=function(){
                alert(this.name);
            }
            var person1=new Person('Byron');
            var person2=new Person('Frank');
            console.log(person1.printName==person2.printName);//true

このように、 Person の各インスタンスには独自の属性名があり、属性 share とメソッド printName もあります。すべてのインスタンスで共有される一般的なオブジェクト処理では、常にこのスタイリッシュで愛情のあるモードでオブジェクトを作成できます。

以上がJavaScript オブジェクトとは何ですか?オブジェクトコードの作り方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。