JavaScript オブジェクトを宣言する方法は何通りありますか? JavaScript オブジェクトを宣言する 6 つの方法

この記事でわかることは、JavaScript オブジェクトを宣言する方法は何通りあるのかということです。 JavaScript オブジェクトを宣言する 6 つの方法は、参考にしていただければ幸いです。

-- 知識が初めての場合は、ES6 で記述する必要はありません。

1. リテラル宣言

var obj = {
        属性名1 : 属性值,
        属性名2 : 属性值,
        属性名3 : 属性值,
        方法名1 : function() {
            .....
        },
        方法名2 : function() {
            .....
        }
    }

obj.property name または obj.method name()properties/ を通じてオブジェクトを読み取ったり呼び出したりできます。メソッド。

2. new 演算子を使用して Object オブジェクトを構築します。

var obj = new Object();
obj.属性名1 = 属性值1;
obj.属性名2 = 属性值2;
obj.属性名3 = 属性值3;
obj.属性名4 = 属性值4;
obj.方法名1 = function() {
    ....
};
obj.方法名2 = function() {
    ....
};
....

最初に new Object() を使用して空のオブジェクトを作成し、次に複数のステートメントを使用してプロパティを追加します。 /methods をオブジェクトに追加します。

3. 関数宣言を使用してオブジェクトを構築する

関数Function自体はオブジェクトObject

var fn = new Function(); //new一个空函数
function myFn() {}; //声明一个空函数
console.log(fn instanceof Object); //true
console.log(myFn instanceof Object); //true

soのインスタンスです。 new Objcet() がオブジェクトを構築する方法を模倣し、function myFn() {} を使用してカスタム関数を宣言し、new myFn( ) 、例:

function person(name, age) {
        this.name = name;
        this.age = age;
        this.say = function() {
            console.log('My name is '+ this.name + ', I\'m ' + this.age + ' years old');
        }
    }
    var xiaoMing = new person('xiaoming', 16);
    xiaoMing.say(); //"My name is xiaoming, I'm 16 years old"

この方法で宣言されたオブジェクトの場合、各 new オブジェクトは独立しており、属性およびメソッド ## の this には互いに影響しません。 # は、それらを呼び出す新しく作成されたオブジェクトを指します。

4. ファクトリ パターン宣言オブジェクト

ファクトリ パターン宣言オブジェクトは、2 つのメソッドと 3 つのメソッドの組み合わせとして、3 つのアイデアを使用して 2 つのメソッドの内容を組み込んだものとして理解できます。上の例を見てみましょう:

function person(name, age) {
        var obj = new Object(); 
        obj.name = name;
        obj.age = age;
        obj.say = function() {
            console.log('My name is '+ obj.name + ', I\'m ' + obj.age + ' years old');
        };
        return obj;
    }
    var xiaoMing = person('xiaoming', 16);
    xiaoMing.say(); //"My name is xiaoming, I'm 16 years old"
    var xiaoHong = person('xiaohong', 18);
    xiaoHong.say(); //"My name is xiaohong, I'm 18 years old"

工場モデルが工場モデルと呼ばれる理由は、類似した製品を大量に生産し、同じことを行い、同じことを行うことができる現実の工場に似ているためです。同じ効果が得られます。彼の記述方法は

3. 関数宣言を使用したオブジェクトの構築 に似ていますが、少し異なります。

function 宣言された関数が呼び出されるたびに、内部的に new Object() が実行され、最後に新しく作成されたオブジェクトが return されます。呼び出しは通常の関数呼び出しと同じです。インスタンス化するときに new を行う必要はありません (new は内部で行われます)。この関数を複数回呼び出すと同じプロセスが実行されますが、生成される 2 つの成果物は相互に影響しません。

5. オブジェクトを宣言するプロトタイプ メソッド

function person() {/*空*/};
    person.prototype.height = "1.80m";
    person.prototype.grade = "Senior 3";
    person.prototype.say = function() {
        console.log( 'I\'m ' + this.height + ' tall and I\'m in '+ this.grade);
    }
    var xiaoMing = new person();
    xiaoMing.say(); //"I'm 1.80m tall and I'm in Senior 3"

プロトタイプ メソッドは、

prototype 属性が指すオブジェクトにオブジェクトの属性/メソッドを書きます。 (すべての関数またはオブジェクトには、オブジェクトの形式で存在する prototype 属性があります)。

毎回

new には実際に次の操作があります:

1) 空のオブジェクトを作成します

2) この空のオブジェクトの
__proto__## を変更します#コンストラクターを指す prototype3) この空のオブジェクトを this
に割り当てます4) コンストラクターでコードを実行します

new

から生成される新しいオブジェクトの __proto__ 属性は person.prototype を指し、person.prototype の関数コンテンツを実行できます。 。 これは、JS でよく言われるイベント プロキシ/デリゲートに少し似ています。イベントは DOM 要素に直接バインドされるのではなく、その親要素にバインドされます。兄弟要素を DOM 要素に追加すると、バブリングにより兄弟要素が同じイベントをトリガーする可能性があります。

6. 混合モード

混合モードは、プロトタイプ モードのコンストラクターとして理解できます。例:

function person(name, height) {
        this.name = name;
        this.height = height;
    };
    person.prototype.age = 18;
    person.prototype.grade = "Senior 3";
    person.prototype.say = function() {
        console.log('Hello, my name is ' + this.name + '. I\'m ' + this.age + ' years old, ' + this.height + ' tall and I\'m in '+ this.grade + '.');
    }
    var xiaoMing = new person('Xiaoming', '1.80m');
    xiaoMing.say();
    //"Hello, my name is Xiaoming. I'm 18 years old, 1.80m tall and I'm in Senior 3."
    var xiaoHong = new person('Xiaohong', '1.65m')
    xiaoHong.say();
    //"Hello, my name is Xiaohong. I'm 18 years old, 1.65m tall and I'm in Senior 3."

混合モードとプロトタイプ モードを比較すると、混合モードの関数本体は空ではなく、関数本体の内容は前述の構築メソッドです。

実際の開発ではこの方法がより一般的に使用されます。

関連する推奨事項:

JavaScript_javascript スキルに基づいてオブジェクトを宣言するいくつかの方法の概要

JavaScript に基づいたグローバル変数の宣言の詳細3つの方法を解説_基礎知識

以上がJavaScript オブジェクトを宣言する方法は何通りありますか? JavaScript オブジェクトを宣言する 6 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。