JavaScript peut créer des objets. Méthode de création : 1. Utilisez Object pour créer directement un objet, la syntaxe est « new Object() » ; 2. Utilisez le nouveau mot-clé pour créer un objet, la syntaxe est « new object name() » ; créez un objet, la syntaxe est "object={property" Nom : valeur d'attribut,...}".
L'environnement d'exploitation de ce tutoriel : système Windows 10, JavaScript version 1.8.5, ordinateur Dell G3.
Un objet JavaScript est une variable qui peut contenir de nombreuses valeurs différentes. Il agit comme un conteneur pour un ensemble de valeurs liées. Par exemple, les utilisateurs d'un site Web et les factures d'un compte bancaire peuvent tous être des objets JavaScript.
En JavaScript, les objets contiennent deux types de valeurs : les propriétés et les méthodes.
Lorsque vous créez un objet JavaScript, vous devez définir son nom, ses propriétés et ses méthodes.
Méthode pour créer un objet JavaScript :
1. Utilisez Object pour créer l'objet directement
var myObj=new Object();//使用Object类创建一个空的对象 myObj.name="wangshihcheng"; myObj.age=20; myObj.infor=function(){ document.write("名字:"+this.name);//this.的指向问题 document.write("年龄:"+this.age); } myObj.infor();//调用创建的对象里面的方法;
2. Utilisez le nouveau mot-clé pour appeler le constructeur pour créer l'objet
Le code est le suivant. :
<script> var obj = new Object(); obj.name = "Kitty";//为对象增加属性 obj.age = 21; obj.showName = function () {//为对象添加方法 console.log(this.name); }; obj.showAge = function(){ console.log(this.age); }; obj.showName(); obj.showAge(); </script>
Cette méthode passe Le mot-clé new génère un objet, puis ajoute des propriétés et des méthodes selon les caractéristiques de JavaScript en tant que langage dynamique pour construire un objet. Le this représente l'objet sur lequel la méthode est appelée.
Le problème avec cette méthode est que si nous devons créer des objets plusieurs fois, nous devons alors répéter le code plusieurs fois, ce qui n'est pas propice à la réutilisation du code.
3. Utilisez le mode prototype pour créer des objets
En JavaScript, chaque fonction possède un attribut prototype, qui est un pointeur pointant vers un objet, appelé
Objet prototype contient des objets qui peuvent être utilisés par un. type spécifique. Propriétés et méthodes partagées par tous les objets d'instance ;
De plus, cet objet a un constructeur d'attribut intégré, pointant vers la méthode de constructeur de création de l'objet ;
Lorsque nous utilisons le modèle prototype, toutes les instances peuvent partager ; les propriétés et les méthodes de l'objet prototype ,
Nous n'avons donc pas besoin de définir tôt les informations d'instance de l'objet dans le constructeur
function Student(){ } Student.prototype.name="wang"; Student.prototype.sex="man"; Student.prototype.class="5"; Student.prototype.sayName=function(){ console.log(this.name); } var s1=new Student(); s1.sayName();//wang var s2=new Student(); s2.sayName();//wang s2.name="shicheng"; s2.sayName();//shicheng
Lorsque nous lisons les propriétés d'un objet, une recherche sera effectuée. commence d'abord à partir de l'instance de l'objet elle-même,
Si dans l'instance Si cet attribut est trouvé dans l'objet, la recherche se termine et la valeur de l'attribut est renvoyée
S'il n'est pas trouvé sur l'instance, continuez à l'étendre ; l'objet prototype de l'objet et recherchez l'objet prototype de l'objet. Si cet attribut est trouvé sur le prototype,
Renvoyez ensuite la valeur correspondant à l'attribut sur l'objet prototype. S'il n'est pas trouvé, renvoyez undefine;
Par conséquent, on peut voir que les attributs de l'objet d'instance écraseront les attributs de l'objet prototype
4 Utilisez JSON pour créer des objets
// object={Nom de l'attribut 1 : valeur de l'attribut 1, nom de l'attribut 2 : valeur de l'attribut. 2,...}
//Notez que le nom de l'attribut au format JOSN doit être mis entre guillemets doubles ;
var p={ "name":"wangsch", "gender":"man", "age":40, "son":[ { "name":"son1", "age":2 }, { "name":"son2", "age":5 } ], "infor":function(){ document.write("父亲的姓名:"+this.name+",父亲的年龄:"+this.age+"<br>"); for( var child in this.son ){ document.write("儿子的姓名:"+this.son[child].name+",儿子的年龄:"+this.son[child].age+"<br>"); } } } p.infor();//调用对象p中的infor方法
5. Utiliser des constructeurs en combinaison Créer des objets avec le mode prototype
Le constructeur est utilisé pour définir. les attributs de l'instance, et le mode prototype est utilisé pour définir des méthodes et des propriétés partagées ;
function Student(name,sex,grade){ this.name=name; this.sex=sex; this.grade=grade; } Student.prototype.sayName=function(){ console.log(this.name); } Student.prototype.school="nongda";
Ce mode mixte peut prendre en charge la transmission de paramètres au constructeur, et il économise également considérablement de la mémoire.
6. Créez des objets à l'aide de méthodes de prototype dynamique.
Le code est le suivant :
<script> function Person(name,age){ this.name = name; this.age = age; this.array = new Array("Kitty","luo"); //如果Person对象中_initialized 为undefined,表明还没有为Person的原型添加方法 if(typeof Person._initialized == "undefined"){ Person.prototype.showName = function () { console.log(this.name); }; Person.prototype.showArray = function () { console.log(this.array); }; Person._initialized = true; } } var obj1 = new Person("Kitty",21); var obj2 = new Person("luo",22); obj1.array.push("Wendy");//向obj1的array属性添加一个元素 obj1.showArray();//Kitty,luo,Wendy obj1.showName();//Kitty obj2.showArray();//Kitty,luo obj2.showName();//luo </script>
Cette méthode est similaire à la méthode constructeur/prototype. Ajoutez simplement la méthode au constructeur et ajoutez un attribut au constructeur Person pour garantir que l'instruction if ne peut être exécutée avec succès qu'une seule fois. Dans les applications pratiques, la méthode constructeur/prototype la plus largement utilisée est utilisée. Les méthodes de prototype dynamique sont également populaires et sont fonctionnellement équivalentes aux méthodes constructeur/prototype. N'utilisez pas uniquement des constructeurs et des méthodes de prototype.
【Recommandations associées : tutoriel vidéo javascript, front-end web】
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!