JavaScript DOM進階程式設計2.1建立可重用的對象–我要堅持到底！

　　1.對象中包含什麼

在javascript中，從函數到字串實際上都是對象

• 繼承

//建立一個person對象的執行個體var penson={};person.getName=function(){...};person.getAge=function(){...};//建立一個emloyee對象的執行個體var employee={};employee.getTitle=function(){...};employ.getSalary=function(){...};//從person對象中繼承方法employee.getName=person.getName;employee.getAge=person.getAge;

View Code

• 理解對象成員

ADS.addEvent(window,'load', function() {     alert('document.body is a: ' + document.body);});//document.body is a:object HTMLBodyElementADS.addEvent(window,'load',function() {    alert('document.getElementById is a: ' + document.getElementById);});//document.getElementById is a://function getElementById(){[native code]}

View Code

• window對象中的一切(覆蓋範圍鏈中的對象)

<h1>Override the alert() method</h1><p>Interesting isn't it?</p>

 

function override() {    // 覆蓋alert函數    var alert = function(message) {        window.alert('overridden:' + message);    };    alert('alert');        // 在override()函數的範圍中調用原始的alert()函數    window.alert('window.alert');}override();// 在window的範圍中調用原始的alert();alert('alert from outside');

View Code

 

//彈出順序：//overridden:alert//window.alert//alert from outside

• 理解範圍和閉包是根本

　　2.建立你自己的對象

 

var myObject=new Object();//Object是一個對象var myObject={};//這兩種都已經被執行個體化。執行個體化的對象一定是一個建構函式//建立一個數組var myArray=new Array();var anotherObject=new myObject();//錯誤的

• 一變多：建立建構函式

function myConstructor(a){//somecode}var myConstructor=function(a){//comecode}var myConstructor=new function('a','/*somecode*/')//效能有問題//使用var myObject=new myConstructor();//再比如：function myConstructor(message){    alert(message);    this.myMessage=message;}var myObject=new myConstructor('Instantiating myObject');var message=myObject.myMessage;

•  添加靜態方法

//瞭解執行個體與建構函式之間的區別有助於消除許多已有的問題//-------僅對Object能正常運行//建立一個Object對象執行個體var myObject=new Object();//添加一個屬性myObject.name='Jeff';//添加一個方法myObject.alertName=function(){    alert(this.name);}//執行添加的方法myObject.alertName();//建立一個Function對象的執行個體var myConctructor=function(){    //somecode}//添加一個靜態屬性myConstructor.name='Jeff';myConstructor.alertName=function(){    alert(this.name);}myConstructor.alertName();//但是，name,alertName不會在新執行個體中var anotherExample=new myConstructor();anotherExample.alertName();//not a function 錯誤

• 像原型中添加靜態方法

//建立建構函式functionmyConstrctor(message){    alert(message);    this.myMessage=message;}//添加一個公用方法（在底層添加）myConstructor.prototype.clearMessage=function(string){    this.myMessage+=''+string;}//可以在新的執行個體上調用該方法var myObject=new myConstructor('Hello World！')；myObject.clearMessage();

通過私人和特權成員控制訪問（只需在該建構函式中使用普通的var和fuction關鍵字即可）

//建立建構函式function myConstrctor(message){    this.myMessage=message;    //私人屬性    var separator='-';    var myOwner=this;    //私人方法    function alertMessage()    {        alert(myOwner.message);    }    //在執行個體化時顯示資訊；    alertMessage();}//如果通過如下方法，則出錯myConstructor.prototype.appendToMessage=function(string){    this.myMessage+=seqarator+string;//出錯 未定義}//特權方法只得是在建構函式中的範圍中使用this關鍵字定義的方法//建立建構函式function myConstrctor(message){    this.myMessage=message;    //私人屬性    var separator='-';    var myOwner=this;    //私人方法    function alertMessage()    {        alert(myOwner.message);    }    //在執行個體化時顯示資訊；    alertMessage();    //特權方法    this.appendToMessage=function(string)    {        this.mymessage+=separator+string;        alertMessage();    }}//這時候就可以var myObject=new myConstructor('Hello World');myObject.appendToMessage('Jeff');//但是仍然不能用下面方法：myObject.alertMessage();//not found

• 共有、私人、特權、靜態成員真的那麼重要嗎？

//建立建構函式function myConstrctor(message){    this.myMessage=message;    //私人屬性    var separator='-';    var myOwner=this;    //私人方法    function alertMessage()    {        alert(myOwner.message);    }    //在執行個體化時顯示資訊；    alertMessage();    //特權方法    this.appendToMessage=function(string)    {        this.mymessage+=separator+string;        alertMessage();    }}//共有方法myConstructor.prototype.clearMessage=function(string){    this.myMessage='';}//靜態屬性myConctructor.name='Jeff';//靜態方法myConstructor.alertName=function(){    alert(this.name);}

記住一下幾天規則可以保證你對所有成員的身份做出適當的界定：

• 由於私人和特權成員在函數內部。新詞他們會被帶到函數的每個執行個體中。
• 共有的原型成員是對象藍圖的一部分，適用於通過new關鍵字執行個體化的該對象的每個執行個體
• 靜態成員只使用於對象的一個特殊執行個體。

 

• 對象字面量