Combien de façons existe-t-il de déclarer des objets javascript ? Six façons de déclarer des objets javascript

Ce que cet article vous apporte, c'est combien de façons existe-t-il de déclarer des objets en JavaScript ? Les six façons de déclarer des objets JavaScript ont une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

-- Si vous débutez dans les connaissances, vous n'avez pas besoin d'écrire en ES6.

1. Déclaration littérale

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

Vous pouvez lire ou appeler les propriétés/méthodes de l'objet via obj.属性名 ou obj.方法名().

2. Utilisez l'opérateur new pour construire l'objet Object

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

Utilisez d'abord new Object() pour créer un objet vide, puis utilisez plusieurs instructions pour ajouter des propriétés/méthodes à l'objet .

3. Construisez des objets à l'aide de déclarations de fonction

La fonction Function elle-même est une instance de l'objet Object

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

, vous pouvez donc imiter new Objcet() à construisez un objet de manière, utilisez function myFn() {} pour déclarer une fonction personnalisée, puis construisez l'objet via new myFn(), par exemple :

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"

Pour les objets déclarés de cette manière, à chaque fois que l'objet sort de new Ils sont indépendants et ne s'affecteront pas les uns les autres. Les this dans les attributs et les méthodes pointent vers les objets nouvellement créés qui les appellent.

4. Objet de déclaration de modèle d'usine

L'objet de déclaration de modèle d'usine peut être compris comme une combinaison de deux et trois méthodes, utilisant l'idée de trois pour incorporer le contenu de deux. Prenons l'exemple ci-dessus :

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"

La raison pour laquelle le modèle d'usine est appelé modèle d'usine est qu'il est similaire à une usine dans la vie réelle qui peut produire un grand nombre de produits similaires, faire la même chose , et obtenez le même effet. Son style d'écriture est similaire à 三、用函数声明的方式构造对象, mais légèrement différent.

Chaque fois que la fonction déclarée par function est appelée, elle l'est en interne new Object(), et finalement l'objet nouvellement créé return est renvoyé L'appel est comme un appel de fonction normal, et il y en a. pas besoin de l'instancier new (nouveau en interne). Bien que l’appel de cette fonction plusieurs fois suive le même processus, les deux produits fabriqués ne s’affectent pas.

5. Méthode de prototypage pour déclarer un objet

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"

La méthode de prototypage consiste à écrire les attributs/méthodes de l'objet sur l'objet pointé par son attribut prototype. (Chaque fonction ou objet possède un attribut prototype, qui existe sous la forme d'un objet).

Chaque fois new a en fait les opérations suivantes :

1) Créer un objet vide
2) Pointer le __proto__ de cet objet vide vers le prototype du constructeur
3) Attribuez cet objet vide à this
4) Exécutez le code dans le constructeur

new Les attributs __proto__ du nouvel objet qui sort pointeront vers. person.prototype, puis Vous pouvez exécuter le contenu de la fonction sur person.prototype.

C'est un peu le proxy/délégué d'événement souvent mentionné en JS. L'événement n'est pas directement lié à l'élément DOM, mais à son élément parent. Lors de l'ajout d'éléments frères à l'élément DOM, les éléments frères peuvent déclencher le même événement en raison du bouillonnement.

6. Mode mixte

Le mode mixte peut être compris comme mode prototype + constructeur, par exemple :

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

En comparant le mode mixte et le mode prototype, nous pouvons constater que fonction en mode mixte Le corps n'est pas vide et le contenu du corps de la fonction est la méthode de construction mentionnée précédemment.

Cette méthode est plus couramment utilisée dans le développement réel.

Recommandations associées :

Un résumé de plusieurs méthodes de déclaration d'objets sous les compétences JavaScript_javascript

Déclaration de variables globales basées sur JavaScript Explication détaillée des trois méthodes_Connaissances de base

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!