js中資料類型，對象，建構函數詳解-js教程-PHP中文網

JavaScript資料型，對象，建構函數，原型對象，初識原型鏈，物件繼承

一。單字部分

①object父類別②constructor建構子③instance實例④call呼叫

⑤apply應用⑥combination組合⑦inheritance繼承

二.預習部分

1.簡述創建物件的兩種方法，以及兩者的區別

new 和字面量賦值

前者要用點.加入屬性與方法

後者直接呼叫

2.簡述使用建構子建立實例的步驟

①建立一個新物件

②將建構函式的作用域賦值給新物件

③執行建構函式程式碼區塊

④傳回新物件

#3.簡述原型鏈在繼承中的作用

它是實作繼承的主要方法

三.上機部分

1.建立person物件

# ## #


	#lang="en">
#	##
	charset="UTF-8">
	建立person物件<span class="html-tag">



	#
	id="aa">
	<script> </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">

上机练习二<span class="html-tag">

id="aa">

#<script> </span></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>function Person(name,age,job,address) {</tr> <tr> <td class="line-number"></td> <td class="line-content"></td>this.name=name;</tr> <tr> <td class="line-number"></td># <td class="line-content"></td>this.age=age;</tr> <tr> <td class="line-number"></td># <td class="line-content"></td>this.job=job;</tr> <tr> <td class="line-number"></td> <td class="line-content"></td>this.address=address;</tr> <tr> <td class="line-number"></td># <td class="line-content"></td>this.show=function() {</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"></td> </tr> <tr> <td class="line-number"></td> <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="姓名："+this .name+"<br/>年齡："+this.age+"<br/>工作："+this.job+"<br/>住址："+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"></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"></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>//var newper=new Person("郎明明","38","中國內地男演員、歌手","中國北京海淀區");<tr> <td class="line-number"></td> <td class="line-content"># </td> </tr>Pers.prototype.name1="陳東";<tr> <td class="line-number"></td> <td class="line-content"> <span class="html-tag"></span>Pers.prototype.age1="20"; </td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">Pers.prototype.job1="IT";<span class="html-tag"></span> </td> </tr> <tr> <td class="line-number">Pers.prototype. address1="河南省";</td> <td class="line-content"> <span class="html-tag"></span> </td> </tr>Pers.prototype.showinn=function () {</tbody></table>###### ### ###var createTi=document.createElement("p");############# ######var strrr="姓名："+this.name1+"<br/&gt ;年齡："+this.age1+"<br/>工作："+this.job1+"<br/>住址："+this.address1;############# # #####document.getElementById("aa").innerHTML=strrr;############ ######}############# # #####var one=new Pers();############ ######one.showinn();############ # #####//newper.show();############ ##########</script> ########### #### ######### ################ ############ ############

3.创建person对象原型链

## function Person(nation,skinColor) { #this.nation = nation; this.skinColor=skinColor; var aaa=文件。 ("aa"); this.shownation=function () { # var createTi=document.createElement("p");# var st="民族："+this.nation;# createTi.innerHTML=st;# aaa.appendChild(createTi)# } #this.showskin=function () { var createTi1=document.createElement("p");# var st1="膚色："+this.skinColor; createTi1.innerHTML=st1; aaa.appendChild(createTi1);# } #} function Woman() { Person.call(this,"滿族","黑色");this.sex="女"; #} var sexa=document.getElementById("aa"); / /Woman.prototype=new Person("漢族","");# Woman.prototype.showsex=function () { var createTi3=document.createElement("p"); var st3="性別："+ this.sex; createTi3.innerHTML=st3; #sexa. appendChild( createTi3);} //var per1=new Person("漢族","黃"); var wo=new Woman () ;#wo.shownation();## # # # ##

lang="en">

charset="UTF-8">

上机练习三<span class="html-tag">

id="aa">

wo.showskin();

wo.showsex();

4.创建继承person的student子类

## function Person(姓名,中文,數學) { this . name=名稱; this.chinese=中文;## ## aaa.appendChild(createTi)# } this.showchinese=function () { var createTi1=document.createElement("p"); var st1="文字："+this.chinese;# ##createTi1.innerHTML=st1;aaa.appendChild(createTi1);}this.showmath=function () {var createTi2=document.createElement("p");var st2="數學："+this.math;createTi2.innerHTML=st2; aaa.appendChild(createTi2);##}# } #function Student() { Person.call(this,"少君","56","96");# this.age="19"; }# var sexa=document.getElementById("aa"); # //Student.prototype=new Person("陳東"," 88 ","99"); Student.prototype.showage=function () { var createTi3=document.createElement("p");# var st3="年齡："+this.age;# createTi3.innerHTML=st3; sexa.appendChild(createTi3);# }


	lang="en">

	charset="UTF-8">
	上机练习四<span class="html-tag">


	id="aa">
	##



this.math =數學;
var aaa=document.getElementById("aa");
this.showname=function () {
#var createTi=document.createElement("p");
#var st="姓名："+this.name;
createTi.innerHTML=st;








	#

	#

















#	//var per1=new Person("漢族","黃色");
	var stu=new Student();
	stu.showname ();
	stu.showchinese();
	stu.showmath() ;
	stu.showage();
	/*var ncm = new Person ("陳東","88","99");
	ncm.showname();
	ncm.showchinese();
	ncm.showmath();*/

# #
#