Detaillierte Erläuterung der Datentypen, Objekte und Konstruktoren in js

JavaScript-Datentypen, Objekte, Konstruktoren, Prototypobjekte, erste Einführung in die Prototypenkette, Objektvererbung

1. Wortteil

①Objekt-Elternklasse②Konstruktor-Konstruktor③Instanzinstanz④Aufruf

⑤Anwenden Anwendung⑥Kombination⑦Vererbung

2. Vorschauteil

1. Beschreiben Sie kurz die beiden Methoden zum Erstellen von Objekten und den Unterschied zwischen den beiden

neue und wörtliche Zuweisung

Ersteres erfordert Punkte.

Letzteres ruft direkt auf

2. Beschreiben Sie kurz die Schritte zum Erstellen einer Instanz mit einem Konstruktor

①Erstellen Sie ein neues Objekt

②Weisen Sie den Bereich des Konstruktors dem neuen Objekt zu

③Führen Sie den Konstruktorcodeblock aus

④Geben Sie das neue Objekt zurück

3 Prototypenkette in der Vererbung

Es ist die Hauptmethode zur Realisierung der Vererbung

3. Praktischer Teil

Personenobjekt erstellen

	lang="en">
	charset="UTF-8">
	id="aa">
	<script> </span></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 person=new Object();</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">person.name="郎晓明";</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">person.age="38";</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">person.job="中国内地男演员、歌手";</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">person.address="中国北京海淀区";</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">person.info=function () {</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.write(strr);</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">person.info();</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"><span class="html-tag"></script>

2.创建person构造函数

	lang="en">
	charset="UTF-8">
	id="aa">
	<script> </span></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">Funktion Person (Name, Alter, Job, 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">Funktion 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"></body> </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">Funktion Person(nation,skinColor) {</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">diese.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">Funktion Person(Name,Chinesisch,Mathe) {</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">dies .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">Funktion Student() {</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","Yellow ");</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 = neue Person („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. Objekte werden in integrierte Objekte und benutzerdefinierte Objekte unterteilt

2. Die Prototypenkette ist die Hauptmethode zur Implementierung der Vererbung

3 Bei der kombinierten Vererbung wird die Prototypkette verwendet, um die Vererbung von Prototypeigenschaften und -methoden zu erreichen.

Willkommen, Fragen zu stellen, auf Fehler hinzuweisen, Lerninformationen zu diskutieren und bei Bedarf Kommentare in privaten Nachrichten zu posten , alle können beantwortet werden

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Datentypen, Objekte und Konstruktoren in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!