Types de données JavaScript, objets, constructeurs, objets prototypes, première introduction à la chaîne de prototypes, héritage d'objet
1. Partie Word
①classe parent d'objet②constructeur constructeur③instance instance④appel
⑤appliquer application⑥combinaison combinaison⑦héritage héritage
2. Partie aperçu
1 Décrivez brièvement les deux méthodes de création d'objets et la différence entre les deux
affectation nouvelle et littérale
<.>Le premier nécessite des points. Ajoutez des attributs et des méthodesLe second appelle directement2 Décrivez brièvement les étapes pour créer une instance à l'aide d'un constructeur①Créez un nouvel objet. ②Attribuer la portée du constructeur au nouvel objet③Exécuter le bloc de code du constructeur④Renvoyer le nouvel objet3. chaîne de prototypes en héritageC'est la méthode principale pour réaliser l'héritage3. Partie pratiqueCréer un objet personne.
2.创建person构造函数
lang="en"> | |
charset="UTF-8"> | |
id="aa"> |
|
<script> </span></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">fonction Personne (nom, âge, travail, adresse) {</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.name=name;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.age=age;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this .job=job;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.address=address;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.show =function() {</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var createTi=document.createElement("p");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var strr="姓名:"+this.name+"<br/>年龄:"+this.age+"<br/>工作:"+this.job+"<br/>住址:"+this.address;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">document.getElementById("aa").innerHTML=strr;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">}</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">}</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">fonction Pers(){</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"> </td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"> </td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">}</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">//var newper=new Person("郎晓明","38","中国内地男演员、歌手","中国北京海淀区");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">Pers.prototype.name1="陈东";</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">Pers.prototype.age1="20";</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">Pers.prototype.job1="IT";</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">Pers.prototype.address1="河南省";</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">Pers.prototype.showinn=function () {</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var createTi=document.createElement("p");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var strrr="姓名:"+this.name1+"<br/>年龄:"+this.age1+"<br/>工作:"+this.job1+"<br/>住址:"+this.address1;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">document.getElementById("aa").innerHTML=strrr;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">}</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var one=new Pers();</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">one.showinn();</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">//newper.show();</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"><span class="html-tag"></script> ; </span></td></tr><tr><td class="line-number"> </td><td class="line-content"><span class="html-tag"></corps> </span></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"><span class="html-tag"></html></span></td> </tr> </tbody></table> <p> </p> <p>3.创建person对象原型链</p> <table><tbody> <tr> <td class="line-number"> </td> <td class="line-content"><span class="html-doctype"><!DOCTYPE html> </span></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"><span class="html-tag"><html <span class="html-attribute-name">lang="<span class="html-attribute-value">en"> </span></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"><span class="html-tag"><head> </span></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"><span class="html-tag"><meta <span class="html-attribute-name">charset="<span class="html-attribute-value">UTF-8"> </span></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"><span class="html-tag"><title>上机练习三<span class="html-tag"></title> </span></span></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"><span class="html-tag"></head> </span></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"><span class="html-tag"><body> </span></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"><span class="html-tag"><div <span class="html-attribute-name">id="<span class="html-attribute-value">aa"><span class="html-tag"></div> </span></span></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"><span class="html-tag"><script> </span></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">fonction Personne(nation, skinColor) {</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.nation =nation;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.skinColor=skinColor;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var aaa=document. getElementById("aa");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.shownation=function () {</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var createTi=document.createElement("p");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var st="民族:"+this.nation;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">createTi.innerHTML=st;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">aaa.appendChild(createTi)</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">}</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.showskin=function () {</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var createTi1=document.createElement("p");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var st1="肤色:"+this.skinColor;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">createTi1.innerHTML=st1;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">aaa.appendChild(createTi1);</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">}</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">}</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">function Woman() {</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">Person.call(this,"满族","黑色");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.sex="女";</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">}</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var sexa=document.getElementById("aa");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"> </td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"> //Woman.prototype=new Person("汉族","黄色");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">Woman.prototype.showsex=function () {</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var createTi3=document.createElement("p");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var st3="性别: "+this.sex;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">createTi3.innerHTML=st3;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">sexa. appendChild(createTi3);</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">}</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"> </td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">//var per1=new Person("汉族","黄色");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var wo=new Woman ();</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"> </td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">wo.shownation();</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">wo.showskin();</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">wo.showsex();</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"><span class="html-tag"></script> | |
4.创建继承person的student子类
lang="en"> | |
charset="UTF-8"> | |
id="aa"> |
|
<script> </span></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">fonction Personne(nom, chinois, mathématiques) {</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">ce .name=name;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.chinese=chinese;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.math =math;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var aaa=document.getElementById("aa");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.showname=function () {</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var createTi=document.createElement("p");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var st="姓名:"+this.name;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">createTi.innerHTML=st;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">aaa.appendChild(createTi)</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">}</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.showchinese=function () {</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var createTi1=document.createElement("p");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var st1="语文:"+this.chinese;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">createTi1.innerHTML=st1;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">aaa.appendChild(createTi1);</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">}</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.showmath=function () {</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var createTi2=document.createElement("p");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var st2="数学:"+this.math;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">createTi2.innerHTML=st2; </td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">aaa.appendChild(createTi2);</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">}</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">}</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">fonction Étudiant() {</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">Person.call(this,"少君","56","96");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.age="19"; </td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">}</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var sexa=document.getElementById("aa");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"> </td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">//Student.prototype=new Person("陈东"," 88","99");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">Student.prototype.showage=function () {</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var createTi3=document.createElement("p");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var st3="年龄:"+this.age;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">createTi3.innerHTML=st3;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">sexa.appendChild(createTi3);</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">}</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"> </td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">//var per1=new Person("Han","jaune ");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var stu=new Student();</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">stu.showname ();</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">stu.showchinese();</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">stu.showmath() ;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">stu.showage();</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">/*var ncm = nouvelle personne ("Chen Dong","88","99");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">ncm.showname();</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">ncm.showchinese();</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">ncm.showmath();*/</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"><span class="html-tag"></script> | |
IV.
1. Les objets sont divisés en objets intégrés et objets personnalisés
2. La chaîne de prototypes est la principale méthode pour implémenter l'héritage
3. l'héritage combiné consiste à utiliser la chaîne de prototypes pour réaliser l'héritage des propriétés et des méthodes du prototype
Bienvenue pour poser des questions, signaler des erreurs, bienvenue pour discuter des informations d'apprentissage, publier des commentaires dans des messages privés si nécessaire , on peut répondre à tout
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!