輕鬆拿下JavaScript(四)——對象字面量,this,call()和apply()方法,JS的異常處理

來源:互聯網
上載者:User

我們今天這講主要講解JavaScript的物件導向的幾個內容:對象字面量,this,this,call()和apply()方法,Js的異常處理。

對象字面量

1、我們之前看到的例子都是使用點標識符建立對象和成員的。比如:

var temp=document.getElementById('example');

我們使用了點來擷取document這個對象的getElementById這麼個成員,然後我們把這個成員執行一下,當然還有一個參數,然後我們把這個對象賦給temp這個變數

2、當然我們也使用過點操作符在prototype中定義方法:

myConstructor.prototype.clearMessage=function(){}

prototype相當於一個建構函式中的一個對象,首先我們建立了一個建構函式myConstructor,在這個myConstructor預設有一個prototype對象,他們在這個對象裡邊添加了一個成員clearMessage,這個成員是一個function,我們把這個匿名的function賦值給這個clearMessage成員變數之中。

這也相當於我們在myConstructor定義了一個共有的方法clearMessage。看個例子:

<script type="text/javascript">function myConstructor(){//}myConstructor.prototyepe.clearMessage=function(){alert("");}var obj=new myConstructor();obj.clearMessage();</script>

這就是我們要講的內容。

3、一種對象字面量作為另一種文法則更清晰便於閱讀:

4、{鍵:值,鍵:值}文法中的“健/值”會成為對象的靜態成員。如果給某個“健”指定的值是一個匿名函數,那麼該函數就會變成對象的靜態方法;否則就是對象的一個靜態屬性。這種文法結構與JSON文法相似。只要記住對象字面量文法會自動建立Object對象執行個體即可,也就是不能使用new關鍵字對其再次進行執行個體化。

5、如果要使用同樣的對象字面量文法建立一個帶有公有方法的建構函式,仍然需要從作為建構函式的function對象開始:

區別在於定義之前還是定義之後調用。

最後說明一點:如果使用對象字面量,那麼必須小心結尾處的逗號。如果你在定義對象時,在最後一項結尾放了一個逗號,那麼最後一項的值會變成null。

this

this是一個難以琢磨的東西;

1、一個依賴於使用它的執行環境而被解析的關鍵字。

<script type="text/javascript">var sound="admin";function myFunction(){this.style.color="red";alert(sound);}</script></head><body><a href="#" id="a">這是測試用的超連結</a><script type="text/javascript" >document.getElementById("a').onclick=myFunction;</script>

這段代碼的意思就是擷取這個a標籤,然後調用這個myFunciton。然後這裡的this就是這個myFunciton對象的一個執行個體,就是這個 <a href="#" id="a">這是測試用的超連結</a>這句話。

那我們為什麼要把這句話:document.getElementById("a').onclick=myFunction; 放到body裡邊呢?因為我們這代碼是從上往下執行的,那麼你要是把這句話放到了a標籤之前,那就報錯,因為這個時候a標籤還沒載入。或者你想在上面寫的話,也可以,寫在window裡邊:

<script type="text/javascript">var sound="admin";function myFunction(){this.style.color="red";alert(sound);}window.onload=function(){document.getElementById("a").onclick=myFunction;}</script></head><body><a href="#" id="a">這是測試用的超連結</a></body>

或者在body裡邊加入onload也行。

如果我們這麼寫:

<script type="text/javascript">var sound="admin";function myFunction(){this.style.color="red";alert(sound);}myFunction();</script>

那麼會報錯,會報什麼錯呢?

因為我們這個myFunction是定義在window上的,相當於:

<script type="text/javascript">var sound="admin";function myFunction(){this.style.color="red";alert(sound);}window.myFunction();</script>

this.style.color="red";這時候的this指向window。這就相當於要修改window的style。那肯定會報錯唄。

call()和apply()方法

強行把這個this這個引用指到某一個對象之上。

JS的異常處理

JS使用try{}和catch()進行表示。

<script type="text/javascript">function myFunction(){this.style.color='green';}try{myFunction();}catch(exception){alert('捕獲的異常名為:'+exception.name+'\n捕獲的異常內容為:'+exception.message);}</script>

然後我們顯示的結果為:

這比剛才的赤裸裸的報錯要好的多,還可以進行異常的處理。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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.