- JavaScript從入門到精通（微視頻精編版）
- 明日科技
- 3536字
- 2020-09-01 15:02:26
5.2 自定義對象的創建
視頻講解
創建自定義對象主要有3種方法：一種是直接創建自定義對象，另一種是通過自定義構造函數來創建，還有一種是通過系統內置的Object對象創建。
5.2.1 直接創建自定義對象
直接創建自定義對象的語法格式如下：
var 對象名 = {屬性名1:屬性值1,屬性名2:屬性值2,屬性名3:屬性值3...}
由語法格式可以看出，直接創建自定義對象時，所有屬性都放在大括號中，屬性之間用逗號分隔，每個屬性都由屬性名和屬性值兩部分組成，屬性名和屬性值之間用冒號隔開。
例如，創建一個學生對象student，并設置3個屬性，分別為name、sex和age，然后輸出這3個屬性的值，代碼如下：
01 var student = { //創建student對象
02 name:"張三",
03 sex:"男",
04 age:25
05 }
06 document.write("姓名："+student.name+"<br>"); //輸出name屬性值
07 document.write("性別："+student.sex+"<br>"); //輸出sex屬性值
08 document.write("年齡："+student.age+"<br>"); //輸出age屬性值
運行結果如圖5.3所示。
圖5.3 創建學生對象并輸出屬性值
另外，還可以使用數組的方式對屬性值進行輸出，代碼如下：
01 var student = { //創建student對象
02 name:"張三",
03 sex:"男",
04 age:25
05 }
06 document.write("姓名："+student['name']+"<br>"); //輸出name屬性值
07 document.write("性別："+student['sex']+"<br>"); //輸出sex屬性值
08 document.write("年齡："+student['age']+"<br>"); //輸出age屬性值
5.2.2 通過自定義構造函數創建對象
雖然直接創建自定義對象很方便也很直觀，但是如果要創建多個相同的對象，使用這種方法就很煩瑣。在JavaScript中可以自定義構造函數，通過調用自定義的構造函數可以創建并初始化一個新的對象。與普通函數不同，調用構造函數必須要使用new運算符。構造函數也可以和普通函數一樣使用參數，其參數通常用于初始化新對象。在構造函數的函數體內通過this關鍵字初始化對象的屬性與方法。
例如，要創建一個學生對象student，可以定義一個名稱為Student的構造函數，代碼如下：
01 function Student(name,sex,age){ //定義構造函數
02 this.name = name; //初始化對象的name屬性
03 this.sex = sex; //初始化對象的sex屬性
04 this.age = age; //初始化對象的age屬性
05 }
上述代碼中，在構造函數內部對name、sex和age 3個屬性進行了初始化，其中，this關鍵字表示對對象自己屬性、方法的引用。
利用該函數，可以用new運算符創建一個新對象，代碼如下：
var student1 = new Student("張三","男",25); //創建對象實例
上述代碼創建了一個名為student1的新對象，新對象student1稱為對象student的實例。使用new運算符創建一個對象實例后，JavaScript會接著自動調用所使用的構造函數，執行構造函數中的程序。
另外，還可以創建多個student對象的實例，每個實例都是獨立的。代碼如下：
01 var student2 = new Student("李四","女",23); //創建其他對象實例
02 var student3 = new Student("王五","男",28); //創建其他對象實例
【例5.01】應用構造函數創建一個球員對象，定義構造函數Player()，在函數中應用this關鍵字初始化對象中的屬性，然后創建一個對象實例，最后輸出對象中的屬性值，即輸出球員的身高、體重、運動項目、所屬球隊和專業特點。程序代碼如下：（實例位置：資源包\源碼\05\5.01）
01 <h1 style="font-size:24px;">梅西</h1>
02 <script type="text/javascript">
03 function Player(height,weight,sport,team,character){
04 this.height = height; //對象的height屬性
05 this.weight = weight; //對象的weight屬性
06 this.sport = sport; //對象的sport屬性
07 this.team = team; //對象的team屬性
08 this.character = character; //對象的character屬性
09 }
10 //創建一個新對象player1
11 var player1 = new Player("170cm","67kg","足球","巴塞羅那","技術出色，意識好");
12 document.write("球員身高："+player1.height+"<br>"); //輸出height屬性值
13 document.write("球員體重："+player1.weight+"<br>"); //輸出weight屬性值
14 document.write("運動項目："+player1.sport+"<br>"); //輸出sport屬性值
15 document.write("所屬球隊："+player1.team+"<br>"); //輸出team屬性值
16 document.write("專業特點："+player1.character+"<br>"); //輸出character屬性值
17 </script>
運行結果如圖5.4所示。
圖5.4 輸出球員對象的屬性值
對象不但可以擁有屬性，還可以擁有方法。在定義構造函數時，也可以定義對象的方法。與對象的屬性一樣，在構造函數中也需要使用this關鍵字來初始化對象的方法。例如，在student對象中定義3個方法showName()、showAge()和showSex()，代碼如下：
01 function Student(name,sex,age){ //定義構造函數
02 this.name = name; //初始化對象的屬性
03 this.sex = sex; //初始化對象的屬性
04 this.age = age; //初始化對象的屬性
05 this.showName = showName; //初始化對象的方法
06 this.showSex = showSex; //初始化對象的方法
07 this.showAge = showAge; //初始化對象的方法
08 }
09 function showName(){ //定義showName()方法
10 alert(this.name); //輸出name屬性值
11 }
12 function showSex(){ //定義showSex()方法
13 alert(this.sex); //輸出sex屬性值
14 }
15 function showAge(){ //定義showAge()方法
16 alert(this.age); //輸出age屬性值
17 }
另外，也可以在構造函數中直接使用表達式來定義方法，代碼如下：
01 function Student(name,sex,age){ //定義構造函數
02 this.name = name; //初始化對象的屬性
03 this.sex = sex; //初始化對象的屬性
04 this.age = age; //初始化對象的屬性
05 this.showName=function(){ //應用表達式定義showName()方法
06 alert(this.name); //輸出name屬性值
07 };
08 this.showSex=function(){ //應用表達式定義showSex()方法
09 alert(this.sex); //輸出sex屬性值
10 };
11 this.showAge=function(){ //應用表達式定義showAge()方法
12 alert(this.age); //輸出age屬性值
13 };
14 }
【例5.02】應用構造函數創建一個演員對象Actor，在構造函數中定義對象的屬性和方法，通過創建的對象實例調用對象中的方法，輸出演員的中文名、代表作品以及主要成就。程序代碼如下：（實例位置：資源包\源碼\05\5.02）
01 function Actor(name,work,achievement){
02 this.name = name; //對象的name屬性
03 this.work = work; //對象的work屬性
04 this.achievement = achievement; //對象的achievement屬性
05 this.introduction = function(){ //定義introduction()方法
06 document.write("中文名："+this.name); //輸出name屬性值
07 document.write("<br>代表作品："+this.work); //輸出work屬性值
08 document.write("<br>主要成就："+this.achievement); //輸出achievement屬性值
09 }
10 }
11 var Actor1 = new Actor("威爾·史密斯","《獨立日》、《黑衣人》",
"奧斯卡金像獎最佳男主角提名"); //創建對象Actor1
12 Actor1.introduction(); //調用introduction()方法
運行結果如圖5.5所示。
圖5.5 調用對象中的方法輸出演員簡介
調用構造函數創建對象需要注意一個問題。如果構造函數中定義了多個屬性和方法，那么在每次創建對象實例時都會為該對象分配相同的屬性和方法，這樣會增加對內存的需求，這時可以通過prototype屬性來解決這個問題。
prototype屬性是JavaScript中所有函數都有的一個屬性。該屬性可以向對象中添加屬性或方法。
語法如下：
object.prototype.name=value
參數說明。
object：構造函數名。
name：要添加的屬性名或方法名。
value：添加屬性的值或執行方法的函數。
例如，在student對象中應用prototype屬性向對象中添加一個show()方法，通過調用show()方法輸出對象中3個屬性的值。代碼如下：
01 function Student(name,sex,age){ //定義構造函數
02 this.name = name; //初始化對象的屬性
03 this.sex = sex; //初始化對象的屬性
04 this.age = age; //初始化對象的屬性
05 }
06 Student.prototype.show=function(){ //添加show()方法
07 alert("姓名："+this.name+"\n性別："+this.sex+"\n年齡："+this.age);
08 }
09 var student1=new Student("張三","男",25); //創建對象實例
10 student1.show(); //調用對象的show()方法
運行結果如圖5.6所示。
圖5.6 輸出3個屬性值
【例5.03】應用構造函數創建一個圓的對象Circle，定義構造函數Circle()，然后應用prototype屬性向對象中添加屬性和方法，通過調用方法實現計算圓的周長和面積的功能。程序代碼如下：（實例位置：資源包\源碼\05\5.03）
01 function Circle(r){
02 this.r=r; //設置對象的r屬性
03 }
04 Circle.prototype.pi=3.14; //添加對象的pi屬性
05 Circle.prototype.circumference=function(){ //添加計算圓周長的circumference()方法
06 return 2*this.pi*this.r; //返回圓的周長
07 }
08 Circle.prototype.area=function(){ //添加計算圓面積的area()方法
09 return this.pi*this.r*this.r; //返回圓的面積
10 }
11 var c=new Circle(10); //創建一個新對象c
12 document.write("圓的半徑為"+c.r+"<br>"); //輸出圓的半徑
13 document.write("圓的周長為"+parseInt(c.circumference())+"<br>"); //輸出圓的周長
14 document.write("圓的面積為"+parseInt(c.area())); //輸出圓的面積
運行結果如圖5.7所示。
圖5.7 計算圓的周長和面積
5.2.3 通過Object對象創建自定義對象
Object對象是JavaScript中的內部對象，它提供了對象的最基本功能，這些功能構成了所有其他對象的基礎。Object對象提供了創建自定義對象的簡單方式，使用這種方式不需要再定義構造函數。可以在程序運行時為JavaScript對象隨意添加屬性，因此使用Object對象能很容易地創建自定義對象。
創建Object對象的語法如下：
obj = new Object([value])
參數說明。
obj：必選項。要賦值為Object對象的變量名。
value：可選項。任意一種基本數據類型（Number、Boolean或String）。如果value為一個對象，返回不做改動的該對象。如果value為null、undefined，或者沒有給出，則產生沒有內容的對象。
使用Object對象可以創建一個沒有任何屬性的空對象。如果要設置對象的屬性，只需要將一個值賦給對象的新屬性即可。例如，使用Object對象創建一個自定義對象student，并設置對象的屬性，然后對屬性值進行輸出，代碼如下：
01 var student = new Object(); //創建一個空對象
02 student.name = "王五"; //設置對象的name屬性
03 student.sex = "男"; //設置對象的sex屬性
04 student.age = 28; //設置對象的age屬性
05 document.write("姓名："+student.name+"<br>"); //輸出對象的name屬性值
06 document.write("性別："+student.sex+"<br>"); //輸出對象的sex屬性值
07 document.write("年齡："+student.age+"<br>"); //輸出對象的age屬性值
運行結果如圖5.8所示。
圖5.8 創建Object對象并輸出屬性值
說明
一旦通過給屬性賦值創建了該屬性，就可以在任何時候修改這個屬性的值，只需要賦給它新值即可。
在使用Object對象創建自定義對象時，也可以定義對象的方法。例如，在student對象中定義方法show()，然后對方法進行調用，代碼如下：
01 var student = new Object(); //創建一個空對象
02 student.name = "張三"; //設置對象的name屬性
03 student.sex = "男"; //設置對象的sex屬性
04 student.age = 25; //設置對象的age屬性
05 student.show = function(){ //定義對象的方法
06 //輸出屬性的值
07 alert("姓名："+student.name+"\n性別："+student.sex+"\n年齡："+student.age);
08 };
09 student.show(); //調用對象的方法
運行結果如圖5.9所示。
圖5.9 調用對象的方法
如果在創建Object對象時沒有指定參數，JavaScript將會創建一個Object實例，但該實例并沒有具體指定為哪種對象類型，這種方法多用于創建一個自定義對象。如果在創建Object對象時指定了參數，可以直接將value參數的值轉換為相應的對象。如以下代碼就是通過Object對象創建了一個字符串對象。
var myObj = new Object("你好JavaScript"); //創建一個字符串對象
【例5.04】使用Object對象創建自定義對象book，在book對象中定義方法getBookInfo()，在方法中傳遞3個參數，然后對這個方法進行調用，輸出圖書信息。程序代碼如下：（實例位置：資源包\源碼\05\5.04）
01 var book = new Object(); //創建一個空對象
02 book.getBookInfo = getBookInfo; //定義對象的方法
03 function getBookInfo(name,type,price){
04 //輸出圖書的書名、類型及價格
05 document.write("書名："+name+"<br>類型："+type+"<br>價格："+price);
06 }
07 book.getBookInfo("JavaScript入門經典","JavaScript","80"); //調用對象的方法
運行結果如圖5.10所示。
圖5.10 創建圖書對象并調用對象中的方法
- Implementing VMware Horizon 7（Second Edition）
- Visual C++程序設計教程
- 案例式C語言程序設計
- 大學計算機應用基礎實踐教程
- 軟件項目管理（第2版）
- Visual Basic學習手冊
- Flutter跨平臺開發入門與實戰
- Mastering Android Game Development
- PHP編程基礎與實例教程
- Test-Driven Development with Django
- R語言數據可視化：科技圖表繪制
- 3ds Max印象 電視欄目包裝動畫與特效制作
- 創意UI Photoshop玩轉移動UI設計
- Python一行流：像專家一樣寫代碼
- Drupal Search Engine Optimization