搜尋

首頁  >  文章  >  web前端  >  js中資料類型，對象，建構函數詳解

js中資料類型，對象，建構函數詳解

零下一度
零下一度原創
2017-07-02 09:20:251813瀏覽

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">
o #<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();*/
# # 
# 

# 

 

四.總結

1.物件分為內建物件和自訂物件

###2.原型鍊是實現繼承的主要方法######3.組合繼承的想法是使用原型鏈實現原型屬性和方法的繼承###### ######歡迎提問，歡迎指錯，歡迎討論學習資訊有需要的私聊發布評論即可都能回覆的###### # ##

以上是js中資料類型，對象，建構函數詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：html 裡的css 和Js 的程式碼如何實現？下一篇：html 裡的css 和Js 的程式碼如何實現？

相關文章

看更多