Detailed explanation of data types, objects, and constructors in js

JavaScript data type, object, constructor, prototype object, first introduction to prototype chain, object inheritance

1. Word part

①object parent class②constructor constructor③instance instance④call call

⑤apply application⑥combination combination⑦inheritance inheritance

2. Preview part

1. Briefly describe the two methods of creating objects and the difference between them

new and Literal assignment

The former requires dot.Add properties and methods

The latter calls directly

2. Briefly describe the steps to create an instance using a constructor

①Create a new object

②Assign the scope of the constructor to the new object

③Execute the constructor code block

④Return the new object

3. Briefly describe the role of prototype chain in inheritance

It is the main method to realize inheritance

3. Hands-on part

1. Create person object

#####

id="

<script> <tr> <td class="line-number"></td> <td class="line-content"> <span class="html-tag"></span>##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= "Lang Xiaoming";</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="Mainland China actor, singer";</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">person.address="Haidian District, Beijing, China";</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="Name:"+this.name+"<br/ >Age: "+this.age+"<br/>Job: "+this.job+"<br/>Address: "+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"></td></script>

# #lang="en">

##charset="

UTF-8">

aa">

2.创建person构造函数

##

lang="en">

charset="UTF-8">

id="aa">

##<script> <span class="html-tag"></span> </td> </tr> <tr> <td class="line-number"></td>function Person(name,age,job,address) {<td class="line-content"></td> </tr> <tr> <td class="line-number"></td>this.name=name;<td class="line-content"></td> </tr> <tr> <td class="line-number"></td>this.age=age;<td class="line-content"></td> </tr> <tr> <td class="line-number"></td>this.job=job;<td class="line-content"></td> </tr> <tr> <td class="line-number"></td>this.address=address;<td class="line-content"></td> </tr> <tr> <td class="line-number"></td>this.show=function() {<td class="line-content"></td> </tr> <tr> <td class="line-number"></td>var createTi=document.createElement("p");<td class="line-content"></td> </tr> <tr> <td class="line-number"></td>var strr="Name:"+this .name+"<br/>Age:"+this.age+"<br/>Job:"+this.job+"<br/>Address:"+this.address;<td class="line-content"></td> </tr> <tr> <td class="line-number"></td>document.getElementById("aa").innerHTML=strr;<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>function Pers(){<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"></td> </tr> <tr> <td class="line-number">//var newper=new Person("Lang Xiaoming","38","Mainland China actor and singer","Haidian District, Beijing, China");</td> <td class="line-content"></td> </tr> <tr> <td class="line-number">Pers.prototype.name1="Chen Dong";</td> <td class="line-content"></td> </tr> <tr>##Pers.prototype.age1="20"; <td class="line-number"></td> <td class="line-content"></td> </tr> <tr>Pers.prototype.job1="IT";<td class="line-number"></td> <td class="line-content"></td> </tr> <tr>Pers.prototype. address1="Henan Province";<td class="line-number"></td> <td class="line-content"></td> </tr>##Pers.prototype.showinn=function () {<tr> <td class="line-number"></td> <td class="line-content"> </td> </tr>var createTi=document.createElement("p");<tr> <td class="line-number"></td> <td class="line-content"> </td> </tr>var strrr="Name:"+this.name1+"<br/&gt ;Age: "+this.age1+"<br/>Job: "+this.job1+"<br/>Address: "+this.address1;<tr> <td class="line-number"></td> <td class="line-content"> </td>##document.getElementById("aa").innerHTML=strrr;</tr> <tr> <td class="line-number"></td> <td class="line-content"></td>}</tr> <tr> <td class="line-number"></td> <td class="line-content"></td>var one=new Pers();</tr> <tr> <td class="line-number"></td> <td class="line-content"></td>one.showinn();</tr> <tr> <td class="line-number"></td> <td class="line-content"></td>//newper.show();</tr> <tr> <td class="line-number"></td> <td class="line-content"></td> </tr></script>

 

3.创建person对象原型链

	lang="en">
	charset="UTF-8">
	id="aa">
	<script> </span></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">function Person(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">function Person(name,chinese,math) {</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.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">function 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 = new 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>

4. Summary

1. Objects are divided into built-in objects and custom objects

2. The prototype chain is the main method to achieve inheritance

3. The idea of ​​combined inheritance is to use the prototype chain to achieve Inheritance of prototype properties and methods

Welcome to ask questions, point out mistakes, and discuss learning information. If necessary, you can send a private message and post a comment, and everyone can reply

The above is the detailed content of Detailed explanation of data types, objects, and constructors in js. For more information, please follow other related articles on the PHP Chinese website!