Maison > interface Web > js tutoriel > le corps du texte

JavaScript crée des objets

不言
Libérer: 2018-04-10 16:48:50
original
1345 Les gens l'ont consulté

Le contenu partagé avec vous dans cet article concerne la création d'objets en JavaScript, qui ont une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer

Appelez le constructeur du système

Créez le plus. Le moyen simple consiste à créer une instance d'Object, comme suit :

    // 1. 调用系统的构造函数
    var person = new Object();

    // 添加属性
    person.name = "小李";
    person.age = 22;
    person.sex = "F";

    // 添加方法
    person.eat = function () {
        console.log("我喜欢吃油炸榴莲.")
    };

    person.play = function () {
        console.log("我喜欢玩电子游戏.")
    };

    person.introduce = function () {
        console.log("我叫" + this.name + ", 今年" + this.age + "岁.");
    };    
    
    person.introduce();        // 输出:我叫小李, 今年22岁.
Copier après la connexion

Le code ci-dessus crée un objet nommé object et lui ajoute trois propriétés et trois méthodes.

Littéral d'objet

Cependant, bien que le constructeur d'objet et le littéral d'objet puissent être utilisés pour créer un seul objet, la création d'un objet de cette manière générera beaucoup de code répété. Les gens ont donc commencé à utiliser le modèle d’usine. Comme suit :

function createPerson(name, age, sex) {
    var object = new Object();
    person.name = "小李";
    person.age = 22;
    person.sex = "F";
    person.introduce = function () {
        console.log("我叫" + this.name + ", 今年" + this.age + "岁.");
    };
    
    return person;
}

var person0 = createPerson("小苏", "21", "M");
var person1 = createPerson("铁子", "27", "M");
Copier après la connexion

La fonction createPerson() peut construire un objet Person contenant toutes les informations basées sur les paramètres acceptés. Cette fonction peut être appelée un nombre illimité de fois, et à chaque fois elle renvoie un objet contenant trois propriétés et une méthode. Bien que le modèle d'usine résolve le problème d'une grande quantité de duplication de code causée par la création de plusieurs objets similaires, il ne résout pas le problème de l'identification des objets, c'est-à-dire comment connaître le type d'un objet. Avec le développement de JavaScript, un autre nouveau modèle est apparu, à savoir le modèle constructeur.

Modèle de constructeur

Les constructeurs dans ECMAScript peuvent créer des objets de types spécifiques. Les constructeurs natifs tels que les objets Object et les objets Array apparaissent automatiquement dans l'environnement d'exécution au moment de l'exécution. De plus, nous pouvons également personnaliser le constructeur pour personnaliser le type et la méthode de l'objet. Par exemple, l'exemple précédent peut être réécrit en utilisant le constructeur automatique comme le code suivant :

function Person(name, age, sex) {
    this.name = name;
    this.age  = age;
    this.sex  = sex;
    
    this.introduce = function () {
        console.log("我叫" + this.name + ", 今年" + this.age + "岁.");
    };
}

var person0 = createPerson("小苏", "21", "M");
var person1 = createPerson("铁子", "27", "M");
Copier après la connexion

Dans cet exemple, la fonction Person() remplace la fonction createPerson(). Nous avons remarqué que le code de la fonction Person() présente les similitudes suivantes avec la fonction createPerson() :

  • ne crée pas l'objet explicitement

  • Les propriétés et méthodes sont directement affectées à cet objet

  • Il n'y a pas d'instruction return ;

De plus, vous devriez également remarquer que le nom de la fonction commence par la lettre majuscule P. Par convention, les constructeurs doivent toujours commencer par une lettre majuscule et les non-constructeurs doivent commencer par une lettre minuscule.
Pour créer une nouvelle instance de Person, l'opérateur new doit être utilisé. Appeler le constructeur de cette manière passe en fait par quatre processus :

  1. Créer un nouvel objet

  2. Convertir la fonction du constructeur Le domaine est ; attribué au nouvel objet (donc cela pointe vers ce nouvel objet)

  3. exécute le code dans le constructeur

  4. renvoie ce nouvel objet ; .


Recommandations associées :

explication détaillée de la création d'un serveur local avec node.js

Plusieurs créations JS Partage à la manière d'objets

Explication détaillée de la création d'instances de scène avec three.js


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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!