Table des matières
Appelez le constructeur du système
Littéral d'objet
Modèle de constructeur
Maison interface Web js tutoriel JavaScript crée des objets

JavaScript crée des objets

Apr 10, 2018 pm 04:48 PM
javascript js 创建

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!

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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Commandes de chat et comment les utiliser
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS Apr 03, 2024 am 11:55 AM

La technologie de détection et de reconnaissance des visages est déjà une technologie relativement mature et largement utilisée. Actuellement, le langage d'application Internet le plus utilisé est JS. La mise en œuvre de la détection et de la reconnaissance faciale sur le front-end Web présente des avantages et des inconvénients par rapport à la reconnaissance faciale back-end. Les avantages incluent la réduction de l'interaction réseau et de la reconnaissance en temps réel, ce qui réduit considérablement le temps d'attente des utilisateurs et améliore l'expérience utilisateur. Les inconvénients sont les suivants : il est limité par la taille du modèle et la précision est également limitée ; Comment utiliser js pour implémenter la détection de visage sur le web ? Afin de mettre en œuvre la reconnaissance faciale sur le Web, vous devez être familier avec les langages et technologies de programmation associés, tels que JavaScript, HTML, CSS, WebRTC, etc. Dans le même temps, vous devez également maîtriser les technologies pertinentes de vision par ordinateur et d’intelligence artificielle. Il convient de noter qu'en raison de la conception du côté Web

Comment créer un dossier sur Realme Phone ? Comment créer un dossier sur Realme Phone ? Mar 23, 2024 pm 02:30 PM

Titre : Guide du débutant Realme Phone : Comment créer des dossiers sur Realme Phone ? Dans la société actuelle, les téléphones portables sont devenus un outil indispensable dans la vie des gens. En tant que marque de smartphones populaire, RealMobile est appréciée des utilisateurs pour son système d'exploitation simple et pratique. Lors de l'utilisation des téléphones Realme, de nombreuses personnes peuvent être confrontées au besoin d'organiser des fichiers et des applications sur le téléphone, et la création de dossiers est un moyen efficace. Cet article explique comment créer des dossiers sur les téléphones Realme pour aider les utilisateurs à mieux gérer le contenu de leur téléphone. Non.

Comment créer du pixel art dans GIMP Comment créer du pixel art dans GIMP Feb 19, 2024 pm 03:24 PM

Cet article vous intéressera si vous souhaitez utiliser GIMP pour la création de pixel art sous Windows. GIMP est un logiciel d'édition graphique bien connu qui est non seulement gratuit et open source, mais qui aide également les utilisateurs à créer facilement de belles images et de superbes designs. En plus de convenir aussi bien aux concepteurs débutants qu'aux professionnels, GIMP peut également être utilisé pour créer du pixel art, une forme d'art numérique qui utilise les pixels comme seuls éléments de base pour dessiner et créer. Comment créer du pixel art dans GIMP Voici les principales étapes pour créer des images pixel à l'aide de GIMP sur un PC Windows : Téléchargez et installez GIMP, puis lancez l'application. Créez une nouvelle image. Redimensionnez la largeur et la hauteur. Sélectionnez l'outil Crayon. Définissez le type de pinceau sur pixels. installation

Comment créer une famille avec Gree+ Comment créer une famille avec Gree+ Mar 01, 2024 pm 12:40 PM

De nombreux amis ont exprimé leur souhait de savoir comment créer une famille dans le logiciel Gree+. Voici la méthode de fonctionnement pour vous. Amis qui veulent en savoir plus, venez jeter un œil avec moi. Tout d’abord, ouvrez le logiciel Gree+ sur votre téléphone mobile et connectez-vous. Ensuite, dans la barre d'options en bas de la page, cliquez sur l'option « Mon » à l'extrême droite pour accéder à la page du compte personnel. 2. Après être arrivé sur ma page, il y a une option « Créer une famille » sous « Famille ». Après l'avoir trouvée, cliquez dessus pour entrer. 3. Accédez ensuite à la page pour créer une famille, entrez le nom de famille à définir dans la zone de saisie en fonction des invites, puis cliquez sur le bouton « Enregistrer » dans le coin supérieur droit après l'avoir saisi. 4. Enfin, une invite « enregistrement réussi » apparaîtra au bas de la page, indiquant que la famille a été créée avec succès.

Comment créer une affiche de contact pour votre iPhone Comment créer une affiche de contact pour votre iPhone Mar 02, 2024 am 11:30 AM

Dans iOS17, Apple a ajouté une fonctionnalité d'affichage de contacts à ses applications Téléphone et Contacts couramment utilisées. Cette fonctionnalité permet aux utilisateurs de définir des affiches personnalisées pour chaque contact, rendant le carnet d'adresses plus visuel et personnel. Les affiches de contact peuvent aider les utilisateurs à identifier et à localiser des contacts spécifiques plus rapidement, améliorant ainsi l'expérience utilisateur. Grâce à cette fonctionnalité, les utilisateurs peuvent ajouter des images ou des logos spécifiques à chaque contact en fonction de leurs préférences et de leurs besoins, ce qui rend l'interface du carnet d'adresses plus vivante. Apple dans iOS17 offre aux utilisateurs d'iPhone une nouvelle façon de s'exprimer et ajoute une affiche de contact personnalisable. La fonction Contact Poster vous permet d'afficher un contenu unique et personnalisé lorsque vous appelez d'autres utilisateurs d'iPhone. toi

Un premier aperçu de Django : créez votre premier projet Django en utilisant la ligne de commande Un premier aperçu de Django : créez votre premier projet Django en utilisant la ligne de commande Feb 19, 2024 am 09:56 AM

Commencez le parcours du projet Django : démarrez à partir de la ligne de commande et créez votre premier projet Django. Django est un framework d'application Web puissant et flexible. Il est basé sur Python et fournit de nombreux outils et fonctions nécessaires au développement d'applications Web. Cet article vous amènera à créer votre premier projet Django à partir de la ligne de commande. Avant de commencer, assurez-vous que Python et Django sont installés. Étape 1 : Créer le répertoire du projet Tout d'abord, ouvrez la fenêtre de ligne de commande et créez un nouveau répertoire

Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières Dec 18, 2023 pm 03:39 PM

Avec le développement rapide de la finance sur Internet, l'investissement en actions est devenu le choix de plus en plus de personnes. Dans le trading d'actions, les graphiques en bougies sont une méthode d'analyse technique couramment utilisée. Ils peuvent montrer l'évolution des cours des actions et aider les investisseurs à prendre des décisions plus précises. Cet article présentera les compétences de développement de PHP et JS, amènera les lecteurs à comprendre comment dessiner des graphiques en bougies boursières et fournira des exemples de code spécifiques. 1. Comprendre les graphiques en bougies boursières Avant de présenter comment dessiner des graphiques en bougies boursières, nous devons d'abord comprendre ce qu'est un graphique en bougies. Les graphiques en chandeliers ont été développés par les Japonais

Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Jan 05, 2024 pm 06:08 PM

Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest

See all articles