對象基本概念
js支援以下幾種對象:
1.使用者自訂對象
2.核心或內建對象(Date,String,Number等)
3.瀏覽器對象(BOM)
4.文檔對象(DOM)
對象的方法：
把一個函數名賦給屬性，則這個屬性將作為對象的一個方法使用。
<script type="text/javascript"> var toy = new Object(); toy.color = "red"; toy.display = printObject(); function printObject() { alert(toy.color); } toy.display(); </script>
結果：red
建立“類”及其對象：
js不像Java或C++中有類的機制，而是通過函數來定義。
<script type="text/javascript"> function Book() { this.name="abc"; } var bookObj = new Book; alert(bookObj.name); </script>
結果：abc
Book()函數定義了一個類，通過new調用該函數時，它就成為了建構函式，返回的是該類的對象。
註：可以動態地為js中的對象添加屬性：
<script type="text/javascript"> function Book() { this.name="abc"; } var bookObj = new Book; bookObj.date = "1990" alert(bookObj.date); </script>
結果:1990
內嵌函式作為對象的方法：
內嵌函式在建構函式中直接賦值給屬性，免去了第一個例子中先定義再賦值的麻煩。
<script type="text/javascript"> function Book() { this.name="abc"; this.msg = function() {alert(this.name);} } var bookObj = new Book; bookObj.msg(); </script>
結果：abc
對象字面量(Object literal)
通過對象字面量，可以不通過調用建構函式的方式建立對象。
對象字面量使用key/value的方式來表示對象屬性，並且可以嵌套。
文法如下：
1.使用冒號分隔索引值
2.使用逗號分隔每組鍵/值
3.最後一組索引值省略逗號
4.整個對象封裝在一對括弧中
普通對象字面量：
<html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title></title> <script type="text/javascript"> var soldier = { name: undefined, rank: "captain", fallIn: function() { alert("fallIn"); }, fallOut: function() { alert("fallOut"); } }; </script> </head> <body> <script type="text/javascript"> soldier.name = "Tom"; alert(soldier.name); soldier.fallIn(); soldier.fallOut(); </script> </body></html>
運行結果:分別彈出Tom,fallIn，fallOut的對話方塊
嵌套對象字面量：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title></title> <script type="text/javascript"> var soldier = { name: undefined, rank: "captain", region:{ name: "nanjing", phone: 025, address: { state: "jiangsu" } }, fallIn: function() { alert("fallIn"); }, fallOut: function() { alert("fallOut"); } }; </script> </head> <body> <script type="text/javascript"> alert("city:"+soldier.region.name + "---province:" + soldier.region.address.state); </script> </body></html>
運行結果：
city:nanjing---province:jiangsu
對象原型（prototype）
當給建構函式的prototype屬性賦值時，它們會自動擴充到該類的所有執行個體。
用prototype屬性為對象添加屬性
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title></title> <script type="text/javascript"> function Book(title, author) { this.title = title; this.author = author; } </script> </head> <body> <script type="text/javascript"> var book1 = new Book("book1", "author1"); var book2 = new Book("book2", "author2"); Book.prototype.publisher = "Jack"; document.write(book1.title+" is published by "+book1.publisher+"<br/>"); document.write(book2.title+" is published by "+book2.publisher); </script> </body></html>
結果：
頁面輸出
book1 is published by Jack
book2 is published by Jack
註：添加新屬性的方法同樣適用於添加新方法。
原型尋找鏈：js中擷取對象的屬性時，會先查看該屬性是否直接定義在那個對象中，如果沒有找到，則從prototype屬性中尋找，如果還是沒有，則向上尋找父類對象，一直查到最頂層（Object），這樣的過程叫做原型尋找鏈。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title></title> <script type="text/javascript"> function Book(title, author) { this.title = title; this.author = author; } </script> </head> <body> <script type="text/javascript"> var book1 = new Book("book1", "author1"); var book2 = new Book("book2", "author2"); Object.prototype.category = "Science"; Book.prototype.publisher = "Jack"; document.write(book1.title+" is published by "+book1.publisher + " and in the " + book1.category +"<br/>"); document.write(book2.title+" is published by "+book2.publisher + " and in the " + book1.category); </script> </body></html>
輸出結果：
book1 is published by Jack and in the Science
book2 is published by Jack and in the Science
這個例子中向上尋找的過程：Book中尋找publisher->無->Book.prototype尋找publisher->有->Book中尋找category->無->Book.prototype尋找category->無->Object->無->Object.prototype->找到
如果到Object.prototype仍未找到的話，則返回undefined
通過原型實現繼承：
js中沒有extends關鍵字，所以實現繼承用的是原型的方式。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title></title> <script type="text/javascript"> function A() { this.name="abc"; this.getName = function() { return this.name; }; } function B() {} //此處實現了B對A的繼承 B.prototype = new A(); //B的建構函式賦值 B.prototype.constructor = B; //子類添加方法 B.prototype.speak = function () { alert("B is speaking"); } </script> </head> <body> <script type="text/javascript"> var Bobj = new B; Bobj.speak(); alert(Bobj.getName()); </script> </body></html>
結果：先彈出B is speaking再彈出abc
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
