Maison > Article > interface Web > Exemples d'utilisation orientée objet JS
Un objet est une collection de propriétés et de méthodes. Qu’est-ce que l’orientation objet ? L'orientation objet est une idée de programmation et un concept. En js, la programmation orientée objet est implémentée via une méthode appelée prototype.
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>创建对象</title></head><body><button type="button" onclick="showInfo();">点击显示学生信息</button><script type="text/javascript"> //创建一个学生对象 var student=new Object(); //创建对象的属性并且赋值 student.age=50; student.name="小黑"; student.address="海淀区"; //创建对象的方法 student.sayHello=function(){ document.write("姓名:"+student.name+"<br/>"); document.write("年龄:"+student.age+"<br/>"); document.write("住址:"+this.address+"<br/>"); } //用户点击按钮触发的事件 function showInfo(){ student.sayHello(); //调用student的方法 } //现在只是创建了一个对象! 如果我们想创建多个 那么代码冗余!</script></body></html>
Créer un objet étudiant
{Attribut 1 : valeur 1, attribut 2 : valeur 2, attribut 3 : valeur 3}
format de données json : c'est un format de conversion de données
01. Il se présente sous la forme d'une paire clé-valeur
02. L'objet est enregistré dans {}
03. La collection est enregistrée dans []
04. Les données sont séparées par des virgules, et les attributs et les valeurs d'attribut sont séparés par des deux-points
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>通过字面量来创建对象</title></head><body> <button type="button" onclick="showInfo();">点击显示学生信息</button><script type="text/javascript"> var student={ age:50, name:"小黑", address:"海淀区", sayHello:function(){ //方法 document.write("姓名:"+this.name+"<br/>"); document.write("年龄:"+this.age+"<br/>"); document.write("住址:"+this.address+"<br/>"); } } // student 我们称之为变量 =右边的{}中的数据,我们称之为 字面量! //用户点击按钮触发的事件 function showInfo(){ student.sayHello(); //调用student的方法 } // 问题依然存在:现在只是创建了一个对象! 如果我们想创建多个 那么代码冗余!</script></body></html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>通过构造函数创建多个对象</title></head><body><script type="text/javascript"> //创建构造函数 函数名称首字母必须大写 function Student(name,age,address){ //声明属性并赋值 this.name=name; this.age=age; this.address=address; //设置方法 this.sayHello=function(){ document.write("姓名:"+this.name+"<br/>"); document.write("年龄:"+this.age+"<br/>"); document.write("住址:"+this.address+"<br/>"); } } //创建多个对象 var stu1=new Student("小黑1",50,"天堂1"); var stu2=new Student("小黑2",51,"天堂2"); var stu3=new Student("小黑3",52,"天堂3"); //分别调用对象的方法 stu1.sayHello(); stu2.sayHello(); stu3.sayHello(); // 所有的对象都有一个constructor属性!指向了构造函数! document.write("stu1.constructor指向了Student:"+(stu1.constructor==Student)+"<br>"); //instanceof 判断某个对象是否属于某个类型 document.write("stu1属于Student吗?"+(stu1 instanceof Student)+"<br>"); document.write("stu1属于Object吗?"+(stu1 instanceof Object)+"<br>"); document.write("stu1属于Function吗?"+(stu1 instanceof Function)+"<br>");</script></body></html>
Remarque :
01. Tous les objets ont un attribut constructeur ! Points au constructeur!
02. Lorsque nous créons une fonction, la fonction aura un attribut prototype,
Cet attribut pointe vers l'objet prototype créé via le constructeur ! Étudiant.prototype
03. Un objet prototype est un objet en mémoire qui fournit des propriétés et des méthodes partagées pour d'autres objets !
04.L'attribut prototype n'est disponible que pour les fonctions !
05. Chaque objet a un attribut__proto__
, qui pointe vers l'objet prototype !
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>原型对象</title></head><body><script type="text/javascript"> /*创建一个构造函数*/ function Student(){} //通过原型对象来创建对象 Student.prototype.name; Student.prototype.age; Student.prototype.address; Student.prototype.sayHello=function(){ document.write("姓名:"+this.name+"<br/>"); document.write("年龄:"+this.age+"<br/>"); document.write("住址:"+this.address+"<br/>"); } var stu1=new Student(); stu1.name="小白"; stu1.age=52; stu1.address="天上人间"; var stu2=new Student(); stu2.sayHello(); // 验证每个对象都有一个__proto__属性,指向了原型对象! document.write(stu2.__proto__==Student.prototype);</script></body></html>
01. L'attribut prototype n'est disponible que pour les fonctions !
02. Chaque objet a un attribut__proto__
, qui pointe vers l'objet prototype !
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>深入原型对象</title></head><body><script type="text/javascript"> //01.验证只有函数有prototype属性 var a={}; document.write(a.prototype+"<br/>"); document.write(a.__proto__+"<br/>"); var b=function(){} document.write(b.prototype+"<br/>"); document.write(b.__proto__+"<br/>"); var c=new b(); // 02.验证每个对象都有一个__proto__属性,指向了原型对象! document.write(c.__proto__== b.prototype);</script></body></html>
Chaîne prototype :
01. Un objet prototype est une instance d’un autre objet prototype ! Un chaton est un exemple d’animal !
02. Les chaînes de prototypes associées progressent couche par couche, formant une chaîne d'instances et d'objets prototypes. Nous l'appelons la chaîne de prototypes !
Le chat noir accroupi dans le coin (exemple)
Hérité
Classe Chat (01. Equivalent à un chat noir, c'est un objet prototype 02. Comparé à un animal, c'est une instance)
Hérité
Classe animale (01. Objet prototype de tous les animaux 02. Instance de l'objet)
Hérité
Objet (niveau supérieur de tous les objets prototypes)
Tant qu'il s'agit d'un objet, il possède l'attribut__proto__
, pointant vers l'objet prototype !
Question :
L'objet est un objet !
Il y a attributs !__proto__
La valeur de l'attribut est nulle !
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>原型链</title></head><body><script type="text/javascript"> //模拟一个构造函数 var Student=function(){}; var stu1=new Student(); document.write(stu1.__proto__+"<br/>"); //student document.write(stu1.__proto__.__proto__+"<br/>");//function document.write(stu1.__proto__.__proto__.__proto__+"<br/>"); // object null document.write("==================================="); document.write((stu1.__proto__===Object.prototype)+"<br/>"); //false document.write((Student.prototype.__proto__===Object.prototype)+"<br/>"); //true</script></body></html>Constructeur d'emprunt
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>借用构造函数的同时传递参数</title></head><body> <script type="text/javascript"> //创建Animal的构造 function Animal(name){ this.name=name; } //创建Dog的构造 function Dog(){ //借用构造 传递参数 Animal.call(this,"小黑狗"); this.age=50; } //创建Cat的构造 function Cat(){ //借用构造 Animal.call(this,"小猫咪"); this.health=100; } //创建小狗的实例 var dog1=new Dog(); document.write(dog1.name); document.write(dog1.age); //创建小猫咪的实例 var cat1=new Cat(); document.write(cat1.name); document.write(cat1.health); </script></body></html>Héritage combiné
Héritage combiné :Parfois appelé héritage pseudo-classique, il combine les techniques de chaînage de prototypes et d'emprunt de constructeurs,
Un modèle d'héritage qui exploite le meilleur des deux mondes utilise la chaîne de prototypes pour hériter des propriétés et des méthodes du prototype,
L'héritage des attributs d'instance est obtenu en empruntant des constructeurs
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>组合继承</title></head><body><script type="text/javascript"> /*构造方法*/ function Person(name){ this.name=name; this.names=["hei","bai","pei"]; } Person.prototype.sayHello=function(){ alert(this.name); } function Student(name,age){ Person.call(this,name); //继承属性 借用构造 this.age=age; } Student.prototype=new Person();//继承了方法 原型链 //student特有的方法 Student.prototype.sayBey=function(){ alert(this.name); } /*创建对象*/ var stu=new Student("小黑黑",50); stu.names.push("小白白"); document.write(stu.names+"<br/>"); stu.sayHello(); stu.sayBey(); var stu1=new Student("小黑黑2",50); document.write(stu1.names+"<br/>"); stu1.sayHello(); stu1.sayBey();</script></body></html>Recommandations associées :
Explication détaillée des connaissances en matière d'héritage orienté objet js
Description détaillée de la programmation orientée objet JS
JavaScript orienté objet design_js orienté objet
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!