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

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">
	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">
	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!