Wie viele Möglichkeiten gibt es, Javascript-Objekte zu deklarieren? Sechs Möglichkeiten, Javascript-Objekte zu deklarieren

In diesem Artikel erfahren Sie, wie viele Möglichkeiten es gibt, Objekte in JavaScript zu deklarieren. Die sechs Möglichkeiten zur Deklaration von JavaScript-Objekten haben einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

-- Wenn Sie neu im Wissen sind, müssen Sie nicht in ES6 schreiben.

1. Literale Deklaration

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

Sie können die Eigenschaften/Methoden des Objekts über obj.属性名 oder obj.方法名() lesen oder aufrufen.

2. Verwenden Sie den neuen Operator, um das Objektobjekt

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

zu erstellen. Verwenden Sie zuerst new Object(), um ein leeres Objekt zu erstellen, und verwenden Sie dann mehrere Anweisungen, um dem Objekt Eigenschaften/Methoden hinzuzufügen.

3. Konstruieren Sie Objekte mithilfe von Funktionsdeklarationen

Funktion Function selbst ist eine Instanz des Objekts Object

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

, sodass es die Art und Weise nachahmen kann, wie new Objcet() konstruiert Objekte, verwenden Sie function myFn() {}, um eine benutzerdefinierte Funktion zu deklarieren, und erstellen Sie dann das Objekt über new myFn(), zum Beispiel:

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"

Das auf diese Weise deklarierte Objekt wird jedes Mal verwendet, wenn das Objekt aus new herauskommt unabhängig, sie beeinflussen sich nicht gegenseitig. Die this in Attributen und Methoden verweisen auf die neu erstellten Objekte, die sie aufrufen.

4. Factory Pattern Declaration Object

Factory Pattern Declaration Object kann als eine Kombination aus zwei und drei Methoden verstanden werden, wobei die Idee von drei verwendet wird, um den Inhalt von zwei zu integrieren. Nehmen Sie das obige Beispiel:

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"

Der Grund, warum das Fabrikmodell als Fabrikmodell bezeichnet wird, ist, dass es einer Fabrik im wirklichen Leben ähnelt, die eine große Anzahl ähnlicher Produkte herstellen, das Gleiche tun und den gleichen Effekt erzielen. Sein Schreibstil ähnelt 三、用函数声明的方式构造对象, unterscheidet sich jedoch geringfügig.

Jedes Mal, wenn eine durch function deklarierte Funktion aufgerufen wird, wird sie intern new Object() und schließlich das neu erstellte Objekt return zurückgegeben. Der Aufruf ist genau wie ein normaler Funktionsaufruf, und das gibt es auch Keine Notwendigkeit, es zu instanziieren new (intern neu). Obwohl das mehrmalige Aufrufen dieser Funktion denselben Prozess abläuft, haben die beiden erzeugten Produkte keinen Einfluss aufeinander.

5. Prototypische Methode zum Deklarieren eines Objekts

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"

Die Prototyping-Methode besteht darin, die Attribute/Methoden des Objekts auf das Objekt zu schreiben, auf das sein prototype-Attribut zeigt. (Jede Funktion oder jedes Objekt hat ein prototype-Attribut, das in Form eines Objekts vorliegt).

Jedes Mal new hat tatsächlich die folgenden Operationen:

1) Erstellen Sie ein leeres Objekt
2) Richten Sie das __proto__ dieses leeren Objekts auf das prototype des Konstruktor
3) Weisen Sie dieses leere Objekt zu this
4) Führen Sie den Code im Konstruktor

new aus. Die __proto__-Attribute des neuen Objekts, das herauskommt, zeigen auf person.prototype, und dann können Sie den Funktionsinhalt auf person.prototype ausführen.

Dies ist ein bisschen wie der in JS häufig erwähnte Ereignis-Proxy/Delegierte. Das Ereignis ist nicht direkt an das DOM-Element gebunden, sondern an dessen übergeordnetes Element. Beim Hinzufügen von Geschwisterelementen zum DOM-Element können die Geschwisterelemente aufgrund der Blasenbildung dasselbe Ereignis auslösen.

6. Gemischter Modus

Der gemischte Modus kann als Prototyp-Modus + Konstruktor verstanden werden, zum Beispiel:

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."

Beim Vergleich des gemischten Modus und des Prototyp-Modus können wir feststellen, dass der gemischte Modus Der Funktionskörper im Modus ist nicht leer und der Inhalt im Funktionskörper entspricht der zuvor erwähnten Konstruktionsmethode.

Diese Methode wird häufiger in der tatsächlichen Entwicklung verwendet.

Verwandte Empfehlungen:

Eine Zusammenfassung mehrerer Methoden zum Deklarieren von Objekten unter JavaScript_Javascript-Kenntnissen

Deklarieren globaler Variablen basierend auf JavaScript Ausführliche Erklärung der drei Methoden_Grundkenntnisse

Das obige ist der detaillierte Inhalt vonWie viele Möglichkeiten gibt es, Javascript-Objekte zu deklarieren? Sechs Möglichkeiten, Javascript-Objekte zu deklarieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!