Objet JavaScript

Les objets JavaScript sont des données avec des propriétés et des méthodes.

Objets, propriétés et méthodes dans la vraie vie

Dans la vraie vie, une voiture est un objet.

L'objet a ses propriétés, telles que le poids et la couleur, etc., et les méthodes incluent le démarrage et l'arrêt, etc. :

Toutes les voitures ont ces méthodes, mais le temps qu'elles sont exécutés est différent. Toutes les voitures ont ces attributs, mais les attributs de chaque voiture sont différents.

Objets JavaScript

En JavaScript, presque tout est un objet.

En JavaScript, les objets sont très importants Lorsque vous comprenez les objets, vous pouvez comprendre JavaScript.

Vous avez découvert l'affectation de variables JavaScript.

Le code suivant définit la valeur de la variable car sur "Fiat":

var car = "Fiat";

objet Également une variable, mais un objet peut contenir plusieurs valeurs (plusieurs variables).

var car = {type:"Fiat", model:500, color:"white"};

Dans l'exemple ci-dessus, 3 valeurs (" Fiat ", 500, "blanc") est affecté à la voiture variable.

Dans l'exemple ci-dessus, 3 variables (type, modèle, couleur) sont affectées à la variable voiture.

Astuce : Les objets JavaScript sont des conteneurs pour les variables.

Définition d'objet

Vous pouvez utiliser des caractères pour définir et créer des objets JavaScript :

Exemple

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网（php.cn)</title>
</head>
<body>
<p>创建 JavaScript 对象。</p>
<p id="demo"></p>
<script>
    var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
    document.getElementById("demo").innerHTML =
            person.firstName + " 现在 " + person.age + " 岁.";
</script>
</body>
</html>

Exécutez le programme et essayez-le

Définissez des objets JavaScript pour s'étendre sur plusieurs lignes, les espaces et les sauts de ligne ne sont pas nécessaires :

Exemple

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网（php.cn)</title>
    </head>
<body>
<p>创建 JavaScript 对象。</p>
<p id="demo"></p>
<script>
    var person = {
        firstName : "John",
        lastName  : "Doe",
        age       : 50,
        eyeColor  : "blue"
    };
    document.getElementById("demo").innerHTML =
            person.firstName + " 现在 " + person.age + " 岁。";
</script>
</body>
</html>

Exécutez le programme et essayez-le

Propriétés des objets

On peut dire que "les objets JavaScript sont des conteneurs de variables".

Cependant, nous considérons généralement « les objets JavaScript comme des conteneurs de paires clé-valeur ».

Les paires clé-valeur sont généralement écrites sous la forme nom : valeur (la clé et la valeur sont séparées par deux points).

Les paires clé-valeur dans les objets JavaScript sont souvent appelées propriétés d'objet.

Astuce : Les objets JavaScript sont des conteneurs pour les variables de propriété.

La paire clé-valeur de l'objet s'écrit comme :

Tableau associatif en PHP
Dictionnaire en Python
Table de hachage en C
Carte de hachage en Java
Tables de hachage en Ruby et Perl

Accès aux propriétés des objets

Vous pouvez accédez aux propriétés de l'objet de deux manières :

Méthode 1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网（php.cn)</title>
    </head>
<body>
<p>
    有两种方式可以访问对象属性：
</p>
<p>
    你可以使用 .property 或 ["property"].
</p>
<p id="demo"></p>
<script>
    var person = {
        firstName : "John",
        lastName : "Doe",
        id : 5566
    };
    document.getElementById("demo").innerHTML =
            person.firstName + " " + person.lastName;
</script>
</body>
</html>

Exécutez le programme pour l'essayer

Méthode 2

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> PHP中文网</title>
</head>
<body>
<p>
    有两种方式可以访问对象属性:
</p>
<p>
    你可以使用 .property 或 ["property"]。
</p>
<p id="demo"></p>
<script>
    var person = {
        firstName: "John",
        lastName : "Doe",
        id : 5566
    };
    document.getElementById("demo").innerHTML =
            person["firstName"] + " " + person["lastName"];
</script>
</body>
</html>

Exécutez le programme pour essayez-le

Accès aux méthodes objet

Vous pouvez créer des méthodes objet en utilisant la syntaxe suivante :

methodName : function() { lignes de code }

Vous pouvez accéder aux méthodes objet en utilisant la syntaxe suivante :

objectName.methodName()

Habituellement, fullName() est utilisé comme méthode de l'objet personne et fullName est utilisé comme propriété.

Il existe de nombreuses façons de créer, utiliser et modifier des objets JavaScript.

Il existe également de nombreuses façons de créer, utiliser et modifier des propriétés et des méthodes.

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网（php.cn)</title> </head> <body> <p>创建 JavaScript 对象。</p> <p id="demo"></p> <script> var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; document.getElementById("demo").innerHTML = person.firstName + " 现在 " + person.age + " 岁."; </script> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Objet JavaScript

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]