JavaScript數據類型，對象，構造函數，原型對象，初識原型鏈，對象繼承
一.單詞部分
①object父類②constructor構造函數③instance實例④call調用
⑤apply應用⑥combination組合⑦inheritance繼承
二.預習部分
1.簡述創建對象的兩種方法，以及兩者的區別
new 和 字面量賦值
前者要用點.添加屬性和方法
后者直接調用
2.簡述使用構造函數創建實例的步驟
①創建一個新對象
②將構造函數的作用域賦值給新對象
③執行構造函數代碼塊
④返回新對象
3.簡述原型鏈在繼承中的作用
它是實現繼承的主要方法
三.上機部分
1.創建person對象
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>創建person對象</title> | |
| </head> | |
| <body> | |
| <div id="aa"></div> | |
| <script> | |
| var createTi=document.createElement("p"); | |
| var person=new Object(); | |
| person.name="郎曉明"; | |
| person.age="38"; | |
| person.job="中國內地男演員、歌手"; | |
| person.address="中國北京海淀區"; | |
| person.info=function () { | |
| var strr="姓名："+this.name+"<br/>年齡："+this.age+"<br/>工作："+this.job+"<br/>住址："+this.address; | |
| //document.write(strr); | |
| document.getElementById("aa").innerHTML=strr; | |
| } | |
| person.info(); | |
| </script> | |
| </body> | |
| </html> |
2.創建person構造函數
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>上機練習二</title> | |
| </head> | |
| <body> | |
| <div id="aa"></div> | |
| <script> | |
| function Person(name,age,job,address) { | |
| this.name=name; | |
| this.age=age; | |
| this.job=job; | |
| this.address=address; | |
| this.show=function() { | |
| var createTi=document.createElement("p"); | |
| var strr="姓名："+this.name+"<br/>年齡："+this.age+"<br/>工作："+this.job+"<br/>住址："+this.address; | |
| document.getElementById("aa").innerHTML=strr; | |
| } | |
| } | |
| function Pers(){ | |
| } | |
| //var newper=new Person("郎曉明","38","中國內地男演員、歌手","中國北京海淀區"); | |
| Pers.prototype.name1="陳東"; | |
| Pers.prototype.age1="20"; | |
| Pers.prototype.job1="IT"; | |
| Pers.prototype.address1="河南省"; | |
| Pers.prototype.showinn=function () { | |
| var createTi=document.createElement("p"); | |
| var strrr="姓名："+this.name1+"<br/>年齡："+this.age1+"<br/>工作："+this.job1+"<br/>住址："+this.address1; | |
| document.getElementById("aa").innerHTML=strrr; | |
| } | |
| var one=new Pers(); | |
| one.showinn(); | |
| //newper.show(); | |
| </script> | |
| </body> | |
| </html> |
3.創建person對象原型鏈
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>上機練習三</title> | |
| </head> | |
| <body> | |
| <div id="aa"></div> | |
| <script> | |
| function Person(nation,skinColor) { | |
| this.nation=nation; | |
| this.skinColor=skinColor; | |
| var aaa=document.getElementById("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(); | |
| wo.showskin(); | |
| wo.showsex(); | |
| </script> | |
| </body> | |
| </html> |
4.創建繼承person的student子類
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>上機練習四</title> | |
| </head> | |
| <body> | |
| <div id="aa"></div> | |
| <script> | |
| function Person(name,chinese,math) { | |
| this.name=name; | |
| this.chinese=chinese; | |
| this.math=math; | |
| var aaa=document.getElementById("aa"); | |
| this.showname=function () { | |
| var createTi=document.createElement("p"); | |
| var st="姓名："+this.name; | |
| createTi.innerHTML=st; | |
| 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); | |
| } | |
| //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();*/ | |
| </script> | |
| </body> | |
| </html> |
四.總結
1.對象分為內置對象和自定義對象
2.原型鏈是實現繼承的主要方法
3.組合繼承的思路是使用原型鏈實現對原型屬性和方法的繼承
歡迎提問，歡迎指錯，歡迎討論學習信息 有需要的私聊 發布評論即可 都能回復的
原文在博客園http://www.cnblogs.com/a782126844/有需要可以聯系扣扣：2265682997