Objet JavaScript


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

Objets, propriétés et méthodes de la vie réelle

Dans la vraie vie, une voiture est un objet.

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

对象属性方法

car.name = Fiat

car.model = 500

car.weight = 850kg

car.color = white
car.start()

car.drive()

car.brake()

car.stop()

Toutes les voitures ont ces attributs, mais les attributs de chaque voiture sont différents.

Toutes les voitures ont ces méthodes, mais elles sont exécutées à des moments différents.

Objets JavaScript

En JavaScript, presque tout est un objet.


Note在 JavaScript 中，对象是非常重要的，当你理解了对象，就可以了解 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" ;

Un objet est aussi une variable, mais un objet peut contenir plusieurs valeurs (plusieurs variables).

var voiture = {type:"Fiat", modèle:500, couleur:"blanc"};

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

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


NoteJavaScript 对象是变量的容器。


Définition d'objet

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

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>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écuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Définir les objets JavaScript peut s'étendre sur plusieurs lignes, espaces et Les sauts de ligne ne sont pas requis pour :

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>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écuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour consulter l'instance en ligne

Propriétés de l'objet

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.


NoteJavaScript 对象是属性变量的容器。


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éder aux propriétés des objets de deux manières :

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>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>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>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écuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


Méthodes d'objet

Les méthodes d'un objet définissent une fonction et sont stockées en tant que propriétés de l'objet.

Les méthodes objets sont appelées (en fonction) en ajoutant ().

Cette instance accède à la méthode fullName() de l'objet personne :

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php.cn</title> 
</head>
<body>

<p>创建和使用对象方法。</p>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<p id="demo"></p>
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
</script>
	
</body>
</html>

Instance en cours d'exécution»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Si vous souhaitez accéder à la propriété fullName de l'objet personne, elle sera renvoyée sous forme de chaîne définissant la fonction :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
</head>
<body>

<p>创建和使用对象方法。</p>
<p>对象方法是一个函数定义,并作为一个属性值存储。</p>
<p id="demo"></p>
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName;
</script>
	
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

NoteJavaScript 对象是属性和方法的容器。

Après Vous en apprendrez plus sur les fonctions, les propriétés et les méthodes dans ce tutoriel.

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 objets en utilisant la syntaxe suivante :

objectName.methodName()

généralement fullName () est une méthode de l'objet personne, fullName est disponible en tant qu'attribut.

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.


Note在随后的教程中，你将学习到更多关于对象的知识。


Plus d'instances

Créer un objet JavaScript I

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>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écuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Créer un objet JavaScript II

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>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écuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Accéder aux propriétés de l'objet I

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>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écuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Accéder aux propriétés de l'objet II

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>phn.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écuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

L'attribut de fonction est accessible en tant que méthode

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php.cn</title> 
</head>
<body>

<p>创建和使用对象方法。</p>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<p id="demo"></p>
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
</script>
	
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Attribut de fonction accessible en tant qu'attribut

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
</head>
<body>

<p>创建和使用对象方法。</p>
<p>对象方法是一个函数定义,并作为一个属性值存储。</p>
<p id="demo"></p>
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName;
</script>
	
</body>
</html>

Instance en cours d'exécution»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne