Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée des types de données, des objets et des constructeurs dans js

零下一度
Libérer: 2017-07-02 09:20:25
original
1810 Les gens l'ont consulté

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éthodes

Le second appelle directement

2 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 objet

3. chaîne de prototypes en héritage

C'est la méthode principale pour réaliser l'héritage

3. Partie pratique

Créer un objet personne

.

2.创建person构造函数

 
  lang="en">
 
  charset="UTF-8">
  上机练习二<span class="html-tag">
 
 
 
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&gt ; </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">
  上机练习四<span class="html-tag">
 
 
 
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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal