輕鬆拿下JavaScript(三)——建立對象,構造方法,成員

來源:互聯網
上載者:User

我們這節講到:如何建立自己的對象,如何建立構造方法,如何建立公有、私人、特權、靜態成員。

如何建立自己的對象:我們從以下三點來講:

1、我們從最簡單的例子開始:var myObject=new Object();還有一種等價的方式:var myObject={};無論從哪種方式最終的myObject變數都是Object對象的執行個體,他作為一個對象的存在外沒有任何其他作用。

2、執行個體化的過程,首先通過new關鍵字告知JS建立一個全新對象。然後建立的執行個體被賦值給一個變數,以便你可以通過引用那個變數來訪問對象的新執行個體。不過為了做到這一點所執行個體化的對象必須是一個建構函式。

3、每個核心對象,例如:Object、Function、Array和String都含有建構函式。

當完成對象執行個體化之後就不能再基於新執行個體使用new關鍵字建立例外的執行個體了。

var anotherObj=new myObject();

就會報錯,說myObject不是建構函式:我們看一下:

<title>建立自己的對象</title></head><body><script type="text/javascript">var myObject={};//new Object();alert("");</script></body>

我們現在建立了一個myObject對象,那麼我們繼而建立的話:

<title>建立自己的對象</title></head><body><script type="text/javascript">var myObject={};//new Object();var obj=new myObect();alert("");</script></body>

就會報錯。

如何來建立建構函式:

1、Function是建立建構函式的起點。

<script type="text/javascript">function myConstructor(a){/*某些代碼*/}</script>

2、上面的代碼等價於下面的代碼:

<script type="text/javascript">var myConstructor=new Function('a','/*某些代碼*/');</script>

3、下面使用new的方式有效能問題所以不推薦使用。

4、Function對象的特別之處在於,它的執行個體也能作為構造方法,因此可以用來建立函數的新執行個體。所以可以編寫下面的代碼:

<script type="text/javascript">function myConstructor(a){/*某些代碼*/}var myObject=new myConstructor();</script>

此時,myConstructor函數可以作為建構函式。當對象被執行個體之後,建構函式會執行包含的代碼。

<script type="text/javascript">var myObject={};//new Object();function myConstructor(message){/*某些代碼*/alert(message);this.myMessage=message;}var myObj=new myConstructor('helo world');alert("");</script>

顯示的結果為:

在這個例子裡邊:我們要記住一下2點:

1、this引用的是myObj執行個體,通過將message參數賦值給this.myMessage使myObj擁有一個可以隨時訪問的名為myMessage的屬性。var message=myObj.myMessage;

2、myMessage屬性只在被執行個體化的myConstructor的執行個體中可用,而再myConstructor函數自身中是無效的:

function myConstructor(message){this.myMessage="abc";}alert(myConstructor.myMessage);

若是能運行成功,應該顯示的是:abc。對吧。但是結果是:

這就說明了咱們的那個結論。

添加靜態方法:

<script type="text/javascript">var myObject=new Object();//添加一個屬性myObject.name='jh';//添加一個方法myObject.alertName=function(){alert(this.name);}//執行添加的辦法myObject.alertName();</script>

列印出了jh。

在上面的代碼中我們通過點運算子直接在myObject對象上將name屬性和alertName()方法作為靜態成員添加到了對象執行個體中。而此處恰恰是最容易導致誤解的地方。因為這裡的靜態成員只存在於對象的一個個具體執行個體而不存在於建構函式中。

如果以Function對象為起點,也存在同樣的問題,只不過這次的對象執行個體同時也是一個建構函式。

var myConstructor=function(){}myConstructor.name='jh';myConstructor.alertName=function(){alert(this.name);}myConstructor.alertName();

這裡的代碼也能正常運行,因為myConstructor既是一個執行個體也是一個建構函式,但是name和alertName成員不能應用到任何新的執行個體中。如果建立myConstructor的執行個體,會報錯如下面的代碼:

<script type="text/javascript">var myConstructor=function(){}myConstructor.name='jh';myConstructor.alertName=function(){alert(this.name);}//myConstructor.alertName();var myObj=new myConstructor();myObj.alertName();</script>

產生一個錯誤:

因為是一個靜態成員。只存在於對象的一個具體執行個體而不存在於建構函式中。

另外講一細節,我們平時說下面這兩個寫法是一樣的:

var myConstructor=function(){ }function myConstructor(){}

但是有一個細節問題,第一種寫法必須要先定義才能調用,如果我們先調用在定義,就會報錯,而第二種寫法不存在這個問題。

加公有方法:

1、能夠使執行個體化的對象包含的方法稱為公有方法,需要修改函數原型,即prototype屬性。

2、prototype屬性用來定義對象自身內部構造的特殊成員。如果將prototype修改則此修改將立即應用到其派生的對象和執行個體。

3、當修改一個對象的原型時,任何繼承該對象的對象和已經存在的所有執行個體都回立即繼承同樣的變化。根據用法的不同這一特性既強大也可能會導致問題,因此當你修改已有的但不是你的對象的原型時要特別小心。

<script type="text/javascript">function myConstructor(){//某些代碼this.myMessage="abc";}var myObj=new myConstructor();alert(myObj.myMessage);myConstructor.prototype.myName='jh';alert(myObj.myName);</script>

這就列印出來了abc和jh。

要添加公有方法只需要使用點操作符向它的原型添加方法即可:

添加私人和特權成員:

私人成員就是在建構函式中定義的變數和函數。

例如向myConstructor上添加私人方法和屬性只需要:

特權方法:

與私人方法不同,特權方法能夠被公開訪問,而且還能訪問私人成員。特權方法是指在建構函式的範圍中使用this關鍵字定義的方法:

通過上面的方式myConstructor擁有了和前面使用prototype相同的appendToMessage()方法,但是此時的方法隸屬於建構函式的範圍中可以訪問私人成員。

公有、私人、特權、靜態總結:

1、私人和特權成員在函數的內部,他們會被帶到函數的每一個執行個體中,因而將佔用大量的記憶體。

2、公有的原型成員是對象的藍圖的一部分,適用於通過new關鍵字執行個體化該對象的每一個執行個體。

3、靜態成員只適用於對象的一個特殊執行個體。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.